mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-06 10:11:31 +00:00
Merge branch 'feature/mvp' of https://github.com/storytold/storyteller-frontend into feature/mvp
This commit is contained in:
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 };
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
+1
-1
@@ -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);
|
||||
|
||||
+14
-2
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user