Merge branch 'feature/mvp' of https://github.com/storytold/storyteller-frontend into feature/mvp

This commit is contained in:
BFlat committed 2024-02-10 09:09:53 +07:00
commit bd7429bfbb
29 files changed
+167 -466

No files matched your search

@@ -7,6 +7,7 @@ interface Props {
username?: string;
avatarIndex?: number;
backgroundIndex?: number;
noHeight?: boolean;
onClick?: () => void;
}
@@ -30,7 +31,7 @@ function Gravatar(props: Props) {
return (
<img
className="rounded-circle border border-2 h-100 gravatar-img"
className={`rounded-circle border border-2 ${ props.noHeight ? "" : "h-100" } gravatar-img`}
alt={altText}
src={gravatarUrl}
height={props.size}
@@ -58,7 +58,7 @@ export default function BookmarkButton({
const index = busy ? 0 : isToggled ? 1 : 2;
return (
<div className="d-flex gap-2">
<>
<Tippy
theme="fakeyou"
content={toolTip}
@@ -84,6 +84,6 @@ export default function BookmarkButton({
</div>
</button>
</Tippy>
</div>
</>
);
}
@@ -3,10 +3,8 @@ import { Link, useHistory } from "react-router-dom";
import Card from "../Card";
import AudioPlayer from "components/common/AudioPlayer";
import useTimeAgo from "hooks/useTimeAgo";
import { CardFooter } from "components/entities";
import Badge from "components/common/Badge";
import LikeButton from "components/common/LikeButton";
import BookmarkButton from "components/common/BookmarkButton";
import CreatorName from "../CreatorName";
import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
import Button from "components/common/Button";
import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
@@ -43,10 +41,6 @@ export default function AudioCard({
const linkUrl = getCardUrl(data, source, type);
const history = useHistory();
const handleInnerClick = (event: any) => {
event.stopPropagation();
};
const handleSelectModalResultSelect = () => {
if (inSelectModal && onResultSelect) {
onResultSelect({
@@ -107,44 +101,15 @@ export default function AudioCard({
</h6>
<p className="fs-7 opacity-75">{timeAgo}</p>
</div>
<AudioPlayer src={data.public_bucket_path} id={data.token} />
<hr className="my-3" />
<div
className="d-flex align-items-center gap-2"
onClick={handleInnerClick}
>
{showCreator && (
<div className="flex-grow-1">
<CreatorName
displayName={data.maybe_creator?.display_name || "Anonymous"}
gravatarHash={data.maybe_creator?.gravatar_hash || null}
avatarIndex={
data.maybe_creator?.default_avatar.image_index || 0
}
backgroundIndex={
data.maybe_creator?.default_avatar.color_index || 0
}
username={data.maybe_creator?.username || "anonymous"}
/>
</div>
)}
{ratings && (
<div>
<LikeButton
{...{
...ratings.makeProps({
entityToken: data.token,
entityType: "media_file",
}),
}}
/>
</div>
)}
</div>
<CardFooter {...{
creator: data?.maybe_creator,
entityToken: data.token,
entityType: "media_file",
makeBookmarksProps: bookmarks.makeProps,
makeRatingsProps: ratings.makeProps,
showCreator
}}/>
</>
)}
@@ -198,60 +163,13 @@ export default function AudioCard({
</div>
</div>
</div>
<hr className="my-3" />
<div
className="d-flex align-items-center gap-2"
onClick={handleInnerClick}
>
{showCreator && (
<div className="flex-grow-1">
<CreatorName
displayName={
data.creator?.display_name ||
data.details?.maybe_weight_data.maybe_creator
.display_name ||
"Anonymous"
}
gravatarHash={data.creator?.gravatar_hash || null}
avatarIndex={data.creator?.default_avatar.image_index || 0}
backgroundIndex={
data.creator?.default_avatar.color_index || 0
}
username={
data.creator?.username ||
data.details?.maybe_weight_data.maybe_creator.username ||
"anonymous"
}
/>
</div>
)}
{ratings && (
<div>
<LikeButton
{...{
...ratings.makeProps({
entityToken: data.weight_token,
entityType: "model_weight",
}),
}}
/>
</div>
)}
{bookmarks && (
<BookmarkButton
{...{
...bookmarks.makeProps({
entityToken: data.weight_token,
entityType: "model_weight",
}),
}}
/>
)}
</div>
<CardFooter {...{
creator: data?.maybe_creator,
entityToken: data.weight_token,
entityType: "model_weight",
makeBookmarksProps: bookmarks.makeProps,
makeRatingsProps: ratings.makeProps
}}/>
</>
)}
</Card>
@@ -3,8 +3,7 @@ import { Link } from "react-router-dom";
import Card from "../Card";
import useTimeAgo from "hooks/useTimeAgo";
import Badge from "components/common/Badge";
import LikeButton from "components/common/LikeButton";
import CreatorName from "../CreatorName";
import { CardFooter } from "components/entities";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
import getCardUrl from "../getCardUrl";
@@ -29,11 +28,6 @@ export default function BVHCard({
type,
}: BVHCardProps) {
const linkUrl = getCardUrl(data, source, type);
const handleInnerClick = (event: any) => {
event.stopPropagation();
};
const timeAgo = useTimeAgo(data.created_at);
const Wrapper = ({ children }: { children: any }) => inClick ? <div {...{ onClick: () => { inClick(data) } }}>{ children }</div> : <Link {...{ to: linkUrl }}>{ children }</Link>;
@@ -60,39 +54,13 @@ export default function BVHCard({
<div>
<p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
</div>
<hr className="my-2" />
<div
className="d-flex align-items-center gap-2"
onClick={handleInnerClick}
>
{showCreator && (
<div className="flex-grow-1">
<CreatorName
displayName={
data.maybe_creator?.display_name || "Anonymous"
}
gravatarHash={data.maybe_creator?.gravatar_hash || null}
avatarIndex={
data.maybe_creator?.default_avatar.image_index || 0
}
backgroundIndex={
data.maybe_creator?.default_avatar.color_index || 0
}
username={data.maybe_creator?.username || "anonymous"}
/>
</div>
)}
<LikeButton
{...{
...ratings.makeProps({
entityToken: data.token,
entityType: "media_file",
}),
}}
/>
</div>
<CardFooter {...{
creator: data?.maybe_creator,
entityToken: data.token,
entityType: "media_file",
makeBookmarksProps: bookmarks.makeProps,
makeRatingsProps: ratings.makeProps
}}/>
</div>
</div>
</Card>
@@ -9,6 +9,7 @@ interface CreatorNameProps {
avatarIndex: number;
backgroundIndex: number;
className?: string;
noHeight?: boolean;
}
export default function CreatorName({
@@ -18,13 +19,14 @@ export default function CreatorName({
backgroundIndex,
username,
className,
noHeight
}: CreatorNameProps) {
const handleInnerClick = (event: any) => {
event.stopPropagation();
};
const gravatar = (
<Gravatar
<Gravatar {...{ noHeight }}
size={22}
email_hash={gravatarHash}
avatarIndex={avatarIndex || 0}
@@ -1,10 +1,9 @@
import React from "react";
import { Link } from "react-router-dom";
import Card from "../Card";
import { CardFooter } from "components/entities";
import useTimeAgo from "hooks/useTimeAgo";
import Badge from "components/common/Badge";
import LikeButton from "components/common/LikeButton";
import CreatorName from "../CreatorName";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCube } from "@fortawesome/pro-solid-svg-icons";
import getCardUrl from "../getCardUrl";
@@ -28,10 +27,6 @@ export default function FBXCard({
}: FBXCardProps) {
const linkUrl = getCardUrl(data, source, type);
const handleInnerClick = (event: any) => {
event.stopPropagation();
};
const timeAgo = useTimeAgo(data.created_at);
return (
@@ -58,42 +53,13 @@ export default function FBXCard({
<div>
<p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
</div>
<hr className="my-2" />
<div
className="d-flex align-items-center gap-2"
onClick={handleInnerClick}
>
{showCreator && (
<div className="flex-grow-1">
<CreatorName
displayName={
data.maybe_creator?.display_name || "Anonymous"
}
gravatarHash={data.maybe_creator?.gravatar_hash || null}
avatarIndex={
data.maybe_creator?.default_avatar.image_index || 0
}
backgroundIndex={
data.maybe_creator?.default_avatar.color_index || 0
}
username={data.maybe_creator?.username || "anonymous"}
/>
</div>
)}
<div>
<LikeButton
{...{
...ratings.makeProps({
entityToken: data.token,
entityType: "media_file",
}),
}}
/>
</div>
</div>
<CardFooter {...{
creator: data?.maybe_creator,
entityToken: data.token,
entityType: "media_file",
makeBookmarksProps: bookmarks.makeProps,
makeRatingsProps: ratings.makeProps
}}/>
</div>
</div>
</Card>
@@ -1,10 +1,9 @@
import React from "react";
import { Link } from "react-router-dom";
import Card from "../Card";
import { CardFooter } from "components/entities";
import useTimeAgo from "hooks/useTimeAgo";
import Badge from "components/common/Badge";
import LikeButton from "components/common/LikeButton";
import CreatorName from "../CreatorName";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCube } from "@fortawesome/pro-solid-svg-icons";
import getCardUrl from "../getCardUrl";
@@ -28,10 +27,6 @@ export default function GLBCard({
}: GLBCardProps) {
const linkUrl = getCardUrl(data, source, type);
const handleInnerClick = (event: any) => {
event.stopPropagation();
};
const timeAgo = useTimeAgo(data.created_at);
return (
@@ -58,42 +53,13 @@ export default function GLBCard({
<div>
<p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
</div>
<hr className="my-2" />
<div
className="d-flex align-items-center gap-2"
onClick={handleInnerClick}
>
{showCreator && (
<div className="flex-grow-1">
<CreatorName
displayName={
data.maybe_creator?.display_name || "Anonymous"
}
gravatarHash={data.maybe_creator?.gravatar_hash || null}
avatarIndex={
data.maybe_creator?.default_avatar.image_index || 0
}
backgroundIndex={
data.maybe_creator?.default_avatar.color_index || 0
}
username={data.maybe_creator?.username || "anonymous"}
/>
</div>
)}
<div>
<LikeButton
{...{
...ratings.makeProps({
entityToken: data.token,
entityType: "media_file",
}),
}}
/>
</div>
</div>
<CardFooter {...{
creator: data?.maybe_creator,
entityToken: data.token,
entityType: "media_file",
makeBookmarksProps: bookmarks.makeProps,
makeRatingsProps: ratings.makeProps
}}/>
</div>
</div>
</Card>
@@ -1,10 +1,9 @@
import React from "react";
import { Link } from "react-router-dom";
import Card from "../Card";
import { CardFooter } from "components/entities";
import useTimeAgo from "hooks/useTimeAgo";
import Badge from "components/common/Badge";
import LikeButton from "components/common/LikeButton";
import CreatorName from "../CreatorName";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCube } from "@fortawesome/pro-solid-svg-icons";
import getCardUrl from "../getCardUrl";
@@ -28,10 +27,6 @@ export default function GLTFCard({
}: GLTFCardProps) {
const linkUrl = getCardUrl(data, source, type);
const handleInnerClick = (event: any) => {
event.stopPropagation();
};
const timeAgo = useTimeAgo(data.created_at);
return (
@@ -58,42 +53,13 @@ export default function GLTFCard({
<div>
<p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
</div>
<hr className="my-2" />
<div
className="d-flex align-items-center gap-2"
onClick={handleInnerClick}
>
{showCreator && (
<div className="flex-grow-1">
<CreatorName
displayName={
data.maybe_creator?.display_name || "Anonymous"
}
gravatarHash={data.maybe_creator?.gravatar_hash || null}
avatarIndex={
data.maybe_creator?.default_avatar.image_index || 0
}
backgroundIndex={
data.maybe_creator?.default_avatar.color_index || 0
}
username={data.maybe_creator?.username || "anonymous"}
/>
</div>
)}
<div>
<LikeButton
{...{
...ratings.makeProps({
entityToken: data.token,
entityType: "media_file",
}),
}}
/>
</div>
</div>
<CardFooter {...{
creator: data?.maybe_creator,
entityToken: data.token,
entityType: "media_file",
makeBookmarksProps: bookmarks.makeProps,
makeRatingsProps: ratings.makeProps
}}/>
</div>
</div>
</Card>
@@ -1,11 +1,9 @@
import React from "react";
import { Link, useHistory } from "react-router-dom";
import Card from "../Card";
import { CardFooter } from "components/entities";
import useTimeAgo from "hooks/useTimeAgo";
import Badge from "components/common/Badge";
import LikeButton from "components/common/LikeButton";
import BookmarkButton from "components/common/BookmarkButton";
import CreatorName from "../CreatorName";
import Button from "components/common/Button";
import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
@@ -38,11 +36,6 @@ export default function ImageCard({
// const { setToken, setWeightTitle } = useToken();
const linkUrl = getCardUrl(data,source,type);
const handleInnerClick = (event: any) => {
console.log("handleInnderClick")
event.stopPropagation();
};
const handleSelectModalResultSelect = () => {
console.log("handleSelectModalResultSelect")
if (inSelectModal) {
@@ -118,44 +111,13 @@ export default function ImageCard({
<div>
<p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
</div>
<hr className="my-2" />
<div
className="d-flex align-items-center gap-2"
onClick={handleInnerClick}
>
{showCreator && (
<div className="flex-grow-1">
<CreatorName
displayName={
data.maybe_creator?.display_name || "Anonymous"
}
gravatarHash={data.maybe_creator?.gravatar_hash || null}
avatarIndex={
data.maybe_creator?.default_avatar.image_index || 0
}
backgroundIndex={
data.maybe_creator?.default_avatar.color_index || 0
}
username={data.maybe_creator?.username || "anonymous"}
/>
</div>
)}
{ratings && (
<div>
<LikeButton
{...{
...ratings.makeProps({
entityToken: data.token,
entityType: "media_file",
}),
}}
/>
</div>
)}
</div>
<CardFooter {...{
creator: data?.maybe_creator,
entityToken: data.token,
entityType: "media_file",
makeBookmarksProps: bookmarks.makeProps,
makeRatingsProps: ratings.makeProps
}}/>
</div>
</div>
</>
@@ -206,63 +168,13 @@ export default function ImageCard({
<p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
</div>
</div>
<hr className="my-2" />
<div
className="d-flex align-items-center gap-2"
onClick={handleInnerClick}
>
{showCreator && (
<div className="flex-grow-1">
<CreatorName
displayName={
data.creator?.display_name ||
data.details?.maybe_weight_data.maybe_creator
.display_name ||
"Anonymous"
}
gravatarHash={data.creator?.gravatar_hash || null}
avatarIndex={
data.creator?.default_avatar.image_index || 0
}
backgroundIndex={
data.creator?.default_avatar.color_index || 0
}
username={
data.creator?.username ||
data.details?.maybe_weight_data.maybe_creator
.username ||
"anonymous"
}
/>
</div>
)}
{ratings && (
<div>
<LikeButton
{...{
...ratings.makeProps({
entityToken: data.weight_token,
entityType: "model_weight",
}),
}}
/>
</div>
)}
{bookmarks && (
<BookmarkButton
{...{
...bookmarks.makeProps({
entityToken: data.weight_token,
entityType: "model_weight",
}),
}}
/>
)}
</div>
<CardFooter {...{
creator: data?.maybe_creator,
entityToken: data.weight_token,
entityType: "model_weight",
makeBookmarksProps: bookmarks.makeProps,
makeRatingsProps: ratings.makeProps
}}/>
</div>
</div>
</>
@@ -4,14 +4,14 @@ import useTimeAgo from "hooks/useTimeAgo";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight, faPlayCircle } from "@fortawesome/pro-solid-svg-icons";
import Badge from "components/common/Badge";
import LikeButton from "components/common/LikeButton";
import Button from "components/common/Button";
import CreatorName from "../CreatorName";
import { CardFooter } from "components/entities";
import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
import { Link } from "react-router-dom";
import getCardUrl from "../getCardUrl";
interface VideoCardProps {
bookmarks?: any;
data: any;
ratings?: any;
showCreator?: boolean;
@@ -22,6 +22,7 @@ interface VideoCardProps {
}
export default function VideoCard({
bookmarks,
data,
ratings,
showCreator,
@@ -32,10 +33,6 @@ export default function VideoCard({
}: VideoCardProps) {
const linkUrl = getCardUrl(data,source,type);
const handleInnerClick = (event: any) => {
event.stopPropagation();
};
const handleSelectModalResultSelect = () => {
if (inSelectModal && onResultSelect) {
onResultSelect(data);
@@ -92,42 +89,13 @@ export default function VideoCard({
{data.weight_name}
</h6>
<p className="fs-7 opacity-75">{timeAgo}</p>
<hr className="my-2" />
<div
className="d-flex align-items-center gap-2"
onClick={handleInnerClick}
>
{showCreator && (
<div className="flex-grow-1">
<CreatorName
displayName={
data.maybe_creator?.display_name || "Anonymous"
}
gravatarHash={data.maybe_creator?.gravatar_hash || ""}
avatarIndex={
data.maybe_creator?.default_avatar.image_index || ""
}
backgroundIndex={
data.maybe_creator?.default_avatar.color_index || ""
}
username={data.maybe_creator?.username || "anonymous"}
/>
</div>
)}
{ratings && (
<div>
<LikeButton
{...{
...ratings.makeProps({
entityToken: data.token,
entityType: "media_file",
}),
}}
/>
</div>
)}
</div>
<CardFooter {...{
creator: data?.maybe_creator,
entityToken: data.token,
entityType: "media_file",
makeBookmarksProps: bookmarks.makeProps,
makeRatingsProps: ratings.makeProps
}}/>
</div>
</div>
</div>
@@ -58,7 +58,7 @@ export default function LikeButton({
let likeCountShort = useShortenNumber(likeCount);
return (
<div className="d-flex gap-2">
<>
<Tippy
theme="fakeyou"
content={toolTip}
@@ -86,6 +86,6 @@ export default function LikeButton({
</div>
</button>
</Tippy>
</div>
</>
);
}
@@ -1,37 +0,0 @@
import React from "react";
import { MakeRatingsProps } from "hooks/useRatings";
import LikeButton from "components/common/LikeButton";
import CreatorName from "components/common/Card/CreatorName";
interface CardFooterProps {
creator?: any,
entityToken: string,
entityType: string,
makeRatingsProps?: MakeRatingsProps,
showCreator?: boolean
}
export default function CardFooter({ creator, entityToken, entityType, makeRatingsProps, showCreator }: CardFooterProps) {
const { default_avatar, display_name, gravatar_hash, username } = creator || {};
return <>
{ (showCreator || makeRatingsProps) && <hr className="my-2" /> }
<div {...{ className: "fy-card-footer" }}>
{ showCreator && (
<div className="flex-grow-1">
<CreatorName {...{
avatarIndex: default_avatar?.image_index || 0,
backgroundIndex: default_avatar?.color_index || 0,
displayName: display_name || "Anonymous",
gravatarHash: gravatar_hash || null,
username
}} />
</div>
)}
{
makeRatingsProps ? <div>
<LikeButton {...makeRatingsProps({ entityToken, entityType })} />
</div> : null
}
</div>
</>;
};
@@ -0,0 +1,10 @@
.fy-card-footer {
width: 100%;
display: flex;
.fy-card-footer-toggles {
margin-left: auto;
display: flex;
gap: .5rem;
}
}
@@ -0,0 +1,42 @@
import React from "react";
import { MakeBatchProps } from "hooks/useBatchContent";
import { MakeRatingsProps } from "hooks/useRatings";
import BookmarkButton from "components/common/BookmarkButton";
import LikeButton from "components/common/LikeButton";
import CreatorName from "components/common/Card/CreatorName";
import "./CardFooter.scss"
interface CardFooterProps {
creator?: any,
entityToken: string,
entityType: string,
makeBookmarksProps?: MakeBatchProps,
makeRatingsProps?: MakeRatingsProps, // this is MakeBatchProps extended include likeCount
showCreator?: boolean
}
export default function CardFooter({ creator, entityToken, entityType, makeBookmarksProps, makeRatingsProps, showCreator }: CardFooterProps) {
const { default_avatar, display_name, gravatar_hash, username } = creator || {};
const togglesOn = makeBookmarksProps || makeRatingsProps;
const eitherOn = showCreator || togglesOn;
return <>
{ ( eitherOn ) && <hr className="my-2" /> }
<div {...{ className: `fy-card-footer` }}>
{ showCreator && <CreatorName {...{
avatarIndex: default_avatar?.image_index || 0,
backgroundIndex: default_avatar?.color_index || 0,
displayName: display_name || "Anonymous",
gravatarHash: gravatar_hash || null,
noHeight: true,
username
}} />
}
{
togglesOn ? <div {...{ className: "fy-card-footer-toggles" }}>
{ makeRatingsProps && <LikeButton {...makeRatingsProps({ entityToken, entityType })} /> }
{ makeBookmarksProps && <BookmarkButton {...makeBookmarksProps({ entityToken, entityType })} /> }
</div> : null
}
</div>
</>;
};
@@ -0,0 +1 @@
export { default } from "./CardFooter";
@@ -1,8 +1,9 @@
import AudioCard from "./AudioCard";
import CardFooter from "./CardFooter";
import CardWrapper from "./CardWrapper";
import EntityInput from "./EntityInput";
import MediaList from "./MediaList";
import OverlayCard from "./OverlayCard";
import WeightCard from "./WeightCard";
export { AudioCard, CardWrapper, EntityInput, MediaList, OverlayCard, WeightCard };
export { AudioCard, CardFooter, CardWrapper, EntityInput, MediaList, OverlayCard, WeightCard };
@@ -1,6 +1,6 @@
import AccountModalProvider from "./AccountModalProvider";
import InferenceJobs from "./InferenceJobs";
import ModalProvider from "./ModalProvider";
import ModalProvider from "./ModalProvider/ModalProvider";
import SessionProvider from "./SessionProvider";
export { AccountModalProvider, InferenceJobs, ModalProvider, SessionProvider };
@@ -1,2 +1,2 @@
export { default } from "./useBatchContent";
export type { BatchInputProps, MakePropsParams } from "./useBatchContent";
export type { BatchInputProps, MakeBatchProps, MakePropsParams } from "./useBatchContent";
@@ -36,6 +36,8 @@ export interface BatchInputProps {
toggle: BatchToggle
}
export type MakeBatchProps = (x: MakePropsParams) => BatchInputProps;
export default function useBatchContent({
checker,
debug,
@@ -96,8 +96,8 @@ import { VoiceDesignerVoiceEditPage } from "./pages/voice_designer/VoiceDesigner
import VoiceDesignerUseVoicePage from "./pages/voice_designer/VoiceDesignerUseVoicePage";
import { PasswordResetEmailPage } from "./pages/password_reset/PasswordResetEmailPage";
import { PasswordResetVerificationPage } from "./pages/password_reset/PasswordResetVerificationPage";
import EngineCompositor from "./pages/EngineCompositor";
import InferenceJobsPage from "./pages/inference_jobs_page";
import EngineCompositor from "./pages/EngineCompositor/EngineCompositor";
import InferenceJobsPage from "./pages/inference_jobs_page/InferenceJobsPage";
import { NewProfilePage } from "./pages/profile/profile_view/NewProfilePage";
import { ModerationJobControlPage } from "./pages/moderation/job_control/ModerationJobControlPage";
import WeightPage from "./pages/weight/WeightPage";
@@ -109,7 +109,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 VideoWorkflowPage from "./pages/video_workflow";
import VideoWorkflowPage from "./pages/video_workflow/VideoWorkflow";
import ScrollToTop from "./_common/ScrollToTop";
import TextToImagePage from "./pages/text_to_image/TextToImagePage";
import DomainConfigProvider from "context/DomainConfigContext";
@@ -43,6 +43,7 @@ export default function MediaTab() {
onInputChange: () => setShowMasonryGrid(false),
onSuccess: res => {
ratings.gather({ res, expand: true, key: "token" }); // expand rather than replace for lazy loading
bookmarks.gather({ res, expand: true, key: "token" }); // expand rather than replace for lazy loading
setShowMasonryGrid(true);
},
requestList: true,
@@ -120,7 +120,7 @@ export default function MediaPage() {
return (
<Iframe
{...{
url: `https://engine.fakeyou.com?mode=viewer&gltf=${glbUrl}`,
url: `https://engine.fakeyou.com?mode=viewer&mixamo=${glbUrl}`,
className: "fy-studio-frame",
}}
/>
@@ -130,7 +130,7 @@ export default function MediaPage() {
return (
<Iframe
{...{
url: `https://engine.fakeyou.com?mode=viewer&gltf=${gltfUrl}`,
url: `https://engine.fakeyou.com?mode=viewer&mixamo=${gltfUrl}`,
className: "fy-studio-frame",
}}
/>
@@ -59,6 +59,7 @@ export default function BookmarksTab({ username }: { username: string }) {
onInputChange: () => setShowMasonryGrid(false),
onSuccess: res => {
bookmarks.gather({ res, key: "weight_token" });
ratings.gather({ res, key: "weight_token" });
setShowMasonryGrid(true);
},
requestList: true,
@@ -13,13 +13,13 @@ import Pagination from "components/common/Pagination";
import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
import { useListContent, useRatings } from "hooks";
import { useBookmarks, useListContent, useRatings } from "hooks";
import prepFilter from "resources/prepFilter";
export default function MediaTab({ username }: { username: string }) {
const { pathname: source, search } = useLocation();
const urlQueries = new URLSearchParams(search);
// const bookmarks = useBookmarks();
const bookmarks = useBookmarks();
const ratings = useRatings();
const gridContainerRef = useRef<HTMLDivElement | null>(null);
const [showMasonryGrid, setShowMasonryGrid] = useState(true);
@@ -39,7 +39,7 @@ export default function MediaTab({ username }: { username: string }) {
listSet,
onInputChange: () => setShowMasonryGrid(false),
onSuccess: res => {
// bookmarks.gather({ res, key: "token" });
bookmarks.gather({ res, key: "token" });
ratings.gather({ res, key: "token" });
setShowMasonryGrid(true);
},
@@ -116,7 +116,7 @@ export default function MediaTab({ username }: { username: string }) {
onLayoutComplete={() => console.log("Layout complete!")}
>
{media.list.map((data: MediaFile, key: number) => {
let props = { data, source, ratings, type: "media" };
let props = { bookmarks, data, source, ratings, type: "media" };
return (
<div
{...{
@@ -53,6 +53,7 @@ export default function WeightsTab({ username }: { username: string }) {
listSet,
onInputChange: () => setShowMasonryGrid(false),
onSuccess: res => {
console.log("🧽",res);
bookmarks.gather({ res, key: "weight_token" }); // expand rather than replace for lazy loading
ratings.gather({ res, key: "weight_token" });
setShowMasonryGrid(true);
@@ -26,6 +26,7 @@ import {
import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
import PremiumLock from "components/PremiumLock";
import InferenceJobsList from "components/layout/InferenceJobsList";
interface SdInferencePanelProps {
sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -277,13 +278,20 @@ function SdInferencePanel({
);
}
} else if (EnqueueImageGenIsError(response)) {
console.log("error");
console.log("error",response);
}
setIsEnqueuing(false);
return false;
};
const failures = (fail = "") => {
switch (fail) {
default:
return "Uknown failure";
}
};
return (
<Panel padding={true}>
<h4 className="fw-semibold mb-4">Generate an Image</h4>
@@ -443,7 +451,7 @@ function SdInferencePanel({
</Accordion.Item>
</Accordion>
<div className="d-flex gap-2 justify-content-end mt-4">
<div className="d-flex gap-2 justify-content-end mt-4 mb-3">
<Button
{...{
label: "Clear All",
@@ -460,6 +468,10 @@ function SdInferencePanel({
}}
/>
</div>
<InferenceJobsList {...{
failures,
jobType: FrontendInferenceJobType.ImageGeneration
}} />
</Panel>
);
}