mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-06 02:00:46 +00:00
updated 3d asset cards to show cover/default images
This commit is contained in:
Victor committed
1 parent
519a6c6b73
commit
49921e356d
5 files changed
+80
-29
No files matched your search
@@ -4,10 +4,9 @@ import Card from "../Card";
|
||||
import useTimeAgo from "hooks/useTimeAgo";
|
||||
import Badge from "components/common/Badge";
|
||||
import { CardFooter } from "components/entities";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
|
||||
import getCardUrl from "../getCardUrl";
|
||||
import { GetMediaFileTitle } from "common/GetMediaFileTitle";
|
||||
import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
|
||||
|
||||
interface BVHCardProps {
|
||||
bookmarks: any;
|
||||
@@ -35,15 +34,24 @@ export default function BVHCard({
|
||||
|
||||
const Wrapper = ({ children }: { children: any }) => inClick ? <div {...{ onClick: () => { inClick(data) } }}>{ children }</div> : <Link {...{ to: linkUrl }}>{ children }</Link>;
|
||||
|
||||
// const bucketConfig = new BucketConfig();
|
||||
const bucketConfig = new BucketConfig();
|
||||
|
||||
let coverImage = `/images/default-covers/${
|
||||
data?.cover_image?.default_cover.image_index || 0
|
||||
}.webp`;
|
||||
|
||||
if (data?.cover_image?.maybe_cover_image_public_bucket_path) {
|
||||
coverImage = bucketConfig.getCdnUrl(
|
||||
data.cover_image.maybe_cover_image_public_bucket_path,
|
||||
600,
|
||||
100
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Card padding={false} canHover={true}>
|
||||
<div className="card-img d-flex align-items-center justify-content-center">
|
||||
<FontAwesomeIcon icon={faPersonWalking} className="card-img-icon" />
|
||||
</div>
|
||||
|
||||
<img src={coverImage} alt={data.maybe_title} className="card-img" />
|
||||
<div className="card-img-overlay">
|
||||
<div className="card-img-gradient" />
|
||||
|
||||
|
||||
@@ -4,9 +4,8 @@ import Card from "../Card";
|
||||
import { CardFooter } from "components/entities";
|
||||
import useTimeAgo from "hooks/useTimeAgo";
|
||||
import Badge from "components/common/Badge";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCube } from "@fortawesome/pro-solid-svg-icons";
|
||||
import getCardUrl from "../getCardUrl";
|
||||
import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
|
||||
|
||||
interface FBXCardProps {
|
||||
bookmarks: any;
|
||||
@@ -29,6 +28,20 @@ export default function FBXCard({
|
||||
|
||||
const timeAgo = useTimeAgo(data.created_at);
|
||||
|
||||
const bucketConfig = new BucketConfig();
|
||||
|
||||
let coverImage = `/images/default-covers/${
|
||||
data?.cover_image?.default_cover.image_index || 0
|
||||
}.webp`;
|
||||
|
||||
if (data?.cover_image?.maybe_cover_image_public_bucket_path) {
|
||||
coverImage = bucketConfig.getCdnUrl(
|
||||
data.cover_image.maybe_cover_image_public_bucket_path,
|
||||
600,
|
||||
100
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
{...{
|
||||
@@ -36,10 +49,7 @@ export default function FBXCard({
|
||||
}}
|
||||
>
|
||||
<Card padding={false} canHover={true}>
|
||||
<div className="card-img d-flex align-items-center justify-content-center">
|
||||
<FontAwesomeIcon icon={faCube} className="card-img-icon" />
|
||||
</div>
|
||||
|
||||
<img src={coverImage} alt={data.maybe_title} className="card-img" />
|
||||
<div className="card-img-overlay">
|
||||
<div className="card-img-gradient" />
|
||||
|
||||
|
||||
@@ -4,10 +4,9 @@ import Card from "../Card";
|
||||
import { CardFooter } from "components/entities";
|
||||
import useTimeAgo from "hooks/useTimeAgo";
|
||||
import Badge from "components/common/Badge";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCube } from "@fortawesome/pro-solid-svg-icons";
|
||||
import getCardUrl from "../getCardUrl";
|
||||
import { GetMediaFileTitle } from "common/GetMediaFileTitle";
|
||||
import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
|
||||
|
||||
interface GLBCardProps {
|
||||
bookmarks: any;
|
||||
@@ -26,12 +25,27 @@ export default function GLBCard({
|
||||
ratings,
|
||||
type,
|
||||
}: GLBCardProps) {
|
||||
|
||||
const linkUrl = getCardUrl(data, source, type);
|
||||
|
||||
const timeAgo = useTimeAgo(data.created_at);
|
||||
|
||||
const title = GetMediaFileTitle(data);
|
||||
|
||||
const bucketConfig = new BucketConfig();
|
||||
|
||||
let coverImage = `/images/default-covers/${
|
||||
data?.cover_image?.default_cover.image_index || 0
|
||||
}.webp`;
|
||||
|
||||
if (data?.cover_image?.maybe_cover_image_public_bucket_path) {
|
||||
coverImage = bucketConfig.getCdnUrl(
|
||||
data.cover_image.maybe_cover_image_public_bucket_path,
|
||||
600,
|
||||
100
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
{...{
|
||||
@@ -39,10 +53,7 @@ export default function GLBCard({
|
||||
}}
|
||||
>
|
||||
<Card padding={false} canHover={true}>
|
||||
<div className="card-img d-flex align-items-center justify-content-center">
|
||||
<FontAwesomeIcon icon={faCube} className="card-img-icon" />
|
||||
</div>
|
||||
|
||||
<img src={coverImage} alt={data.maybe_title} className="card-img" />
|
||||
<div className="card-img-overlay">
|
||||
<div className="card-img-gradient" />
|
||||
|
||||
|
||||
@@ -4,10 +4,9 @@ import Card from "../Card";
|
||||
import { CardFooter } from "components/entities";
|
||||
import useTimeAgo from "hooks/useTimeAgo";
|
||||
import Badge from "components/common/Badge";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCube } from "@fortawesome/pro-solid-svg-icons";
|
||||
import getCardUrl from "../getCardUrl";
|
||||
import { GetMediaFileTitle } from "common/GetMediaFileTitle";
|
||||
import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
|
||||
|
||||
interface GLTFCardProps {
|
||||
bookmarks: any;
|
||||
@@ -32,6 +31,20 @@ export default function GLTFCard({
|
||||
|
||||
const title = GetMediaFileTitle(data);
|
||||
|
||||
const bucketConfig = new BucketConfig();
|
||||
|
||||
let coverImage = `/images/default-covers/${
|
||||
data?.cover_image?.default_cover.image_index || 0
|
||||
}.webp`;
|
||||
|
||||
if (data?.cover_image?.maybe_cover_image_public_bucket_path) {
|
||||
coverImage = bucketConfig.getCdnUrl(
|
||||
data.cover_image.maybe_cover_image_public_bucket_path,
|
||||
600,
|
||||
100
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
{...{
|
||||
@@ -39,9 +52,7 @@ export default function GLTFCard({
|
||||
}}
|
||||
>
|
||||
<Card padding={false} canHover={true}>
|
||||
<div className="card-img d-flex align-items-center justify-content-center">
|
||||
<FontAwesomeIcon icon={faCube} className="card-img-icon" />
|
||||
</div>
|
||||
<img src={coverImage} alt={data.maybe_title} className="card-img" />
|
||||
|
||||
<div className="card-img-overlay">
|
||||
<div className="card-img-gradient" />
|
||||
|
||||
@@ -4,10 +4,9 @@ import Card from "../Card";
|
||||
import { CardFooter } from "components/entities";
|
||||
import useTimeAgo from "hooks/useTimeAgo";
|
||||
import Badge from "components/common/Badge";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCube } from "@fortawesome/pro-solid-svg-icons";
|
||||
import getCardUrl from "../getCardUrl";
|
||||
import { GetMediaFileTitle } from "common/GetMediaFileTitle";
|
||||
import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
|
||||
|
||||
interface SceneRonCardProps {
|
||||
bookmarks: any;
|
||||
@@ -32,6 +31,20 @@ export default function SceneRonCard({
|
||||
|
||||
const title = GetMediaFileTitle(data);
|
||||
|
||||
const bucketConfig = new BucketConfig();
|
||||
|
||||
let coverImage = `/images/default-covers/${
|
||||
data?.cover_image?.default_cover.image_index || 0
|
||||
}.webp`;
|
||||
|
||||
if (data?.cover_image?.maybe_cover_image_public_bucket_path) {
|
||||
coverImage = bucketConfig.getCdnUrl(
|
||||
data.cover_image.maybe_cover_image_public_bucket_path,
|
||||
600,
|
||||
100
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
{...{
|
||||
@@ -39,9 +52,7 @@ export default function SceneRonCard({
|
||||
}}
|
||||
>
|
||||
<Card padding={false} canHover={true}>
|
||||
<div className="card-img d-flex align-items-center justify-content-center">
|
||||
<FontAwesomeIcon icon={faCube} className="card-img-icon" />
|
||||
</div>
|
||||
<img src={coverImage} alt={data.maybe_title} className="card-img" />
|
||||
|
||||
<div className="card-img-overlay">
|
||||
<div className="card-img-gradient" />
|
||||
|
||||
Reference in new issue
Block a user