Skip to content

Commit c5de51a

Browse files
damienendamienen
authored
Merge pull request #448 from Itheum/stg
Media comp
2 parents 8418818 + 8abc63e commit c5de51a

File tree

8 files changed

+88
-39
lines changed

8 files changed

+88
-39
lines changed

‎src/appsConfig.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ export const NF_TUNES_TOKENS: app_token[] = IS_DEVNET
4343
{ tokenIdentifier: "DATANFTFT-e0b917", nonce: 138 },
4444
{ tokenIdentifier: "DATANFTFT-e0b917", nonce: 187 },
4545
{ tokenIdentifier: "DATANFTFT-e0b917", nonce: 295 },
46+
{ tokenIdentifier: "DATANFTFT-e0b917", nonce: 299 },
47+
{ tokenIdentifier: "DATANFTFT-e0b917", nonce: 301 },
48+
{ tokenIdentifier: "DATANFTFT-e0b917", nonce: 324 },
49+
{ tokenIdentifier: "DATANFTFT-e0b917", nonce: 326 },
50+
4651
...Array.from({ length: 4 }, (_, i) => ({ tokenIdentifier: "OASMUSICPL-47b186", nonce: i })),
4752
...Array.from({ length: 19 }, (_, i) => ({ tokenIdentifier: "FOOWLDMSC-5ee8ec", nonce: i })),
4853
]

‎src/components/DataNftCard.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import { DataNft } from "@itheum/sdk-mx-data-nft/out";
33
import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks/useGetNetworkConfig";
44
import { MARKETPLACE_DETAILS_PAGE } from "config";
55
import { cn } from "libs/utils";
6-
import ImageSlider from "./ImageSlider";
76
import { Modal } from "./Modal/Modal";
87
import { MXAddressLink } from "./MXAddressLink";
8+
import NftMediaComponent from "./NftMediaComponent";
99
import { Button } from "../libComponents/Button";
1010
import { Card, CardContent, CardFooter } from "../libComponents/Card";
1111
import { IFilterData } from "../libComponents/Filter";
12+
import { NftMedia } from "libs/types";
1213

1314
export function DataNftCard({
1415
index,
@@ -48,7 +49,6 @@ export function DataNftCard({
4849
function goToMarketplace(tokenIdentifier: string) {
4950
window.open(`${MARKETPLACE_DETAILS_PAGE}${tokenIdentifier}`)?.focus();
5051
}
51-
5252
return (
5353
<div className="mb-3">
5454
<Card
@@ -57,18 +57,7 @@ export function DataNftCard({
5757
"border-[0.5px] dark:border-slate-100/30 border-slate-300 bg-transparent rounded-[2.37rem] base:w-[18.5rem] md:w-[20.6rem]"
5858
)}>
5959
<CardContent className="flex flex-col p-3">
60-
{dataNft.media && dataNft.media[0] && (dataNft.media[0] as any).url && (dataNft.media[0] as any).fileType.includes("video") ? (
61-
<video autoPlay loop src={(dataNft.media[0] as any).url} className=" mb-8 md:w-auto rounded-3xl base:h-[15rem] md:h-[18rem]"></video>
62-
) : dataNft.extraAssets.length > 0 ? (
63-
<ImageSlider imageUrls={dataNft.media.map((mediaObj: any) => mediaObj.url) ?? [dataNft.nftImgUrl]} autoSlide />
64-
) : (
65-
<div className="mb-8 flex justify-center base:max-h-[15rem] md:max-h-[18rem] object-cover">
66-
<img
67-
className="md:w-auto base:w-[15rem] rounded-3xl"
68-
src={!isLoading ? dataNft.nftImgUrl : "https://media.elrond.com/nfts/thumbnail/default.png"}
69-
/>
70-
</div>
71-
)}
60+
<NftMediaComponent nftMedia={dataNft.media as NftMedia[]} isLoading={isLoading} mediaStyle="mb-8 base:h-[15rem] md:h-[18rem]" />
7261

7362
<div className="md:h-[15rem] h-[13rem]">
7463
<div className="grid grid-cols-12 mb-1">

‎src/components/ImageSlider.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React, { useEffect, useState } from "react";
22
import { motion } from "framer-motion";
3-
import { ArrowLeft, ArrowRight, Image } from "lucide-react";
4-
import { cn } from "libs/utils";
3+
import { ArrowLeft, ArrowRight } from "lucide-react";
54
import { Button } from "libComponents/Button";
65

76
interface ImageSliderProps {
8-
imageUrls: string[];
7+
media: { url: string; type: string }[];
98
autoSlide?: boolean;
109
autoSlideInterval?: number;
11-
imageWidth?: string;
12-
imageHeight?: string;
1310
onLoad?: () => void;
14-
openNftDetailsDrawer?: () => void;
1511
}
1612

1713
//Spring animation parameters
@@ -22,14 +18,14 @@ const spring = {
2218
};
2319

2420
const ImageSlider: React.FC<ImageSliderProps> = (props) => {
25-
const { imageUrls, autoSlide = false, autoSlideInterval = 6000, imageWidth = "210px", imageHeight = "210px", onLoad, openNftDetailsDrawer } = props;
21+
const { media, autoSlide = false, autoSlideInterval = 6000, onLoad } = props;
2622
const [imageIndex, setImageIndex] = useState(0);
2723
const [switchedImageManually, setSwitchedImageManually] = useState(false);
2824
const [nextImageIndex, setNextImageIndex] = useState(0);
2925
const makeFlip = nextImageIndex !== imageIndex;
3026

3127
useEffect(() => {
32-
if (autoSlide && imageUrls.length > 1 && !switchedImageManually) {
28+
if (autoSlide && media.length > 1 && !switchedImageManually) {
3329
const interval = setInterval(() => {
3430
goToNextImage();
3531
}, autoSlideInterval);
@@ -38,17 +34,17 @@ const ImageSlider: React.FC<ImageSliderProps> = (props) => {
3834
}, [switchedImageManually]);
3935

4036
function goToPreviousImage(autoSwitch = false) {
41-
setNextImageIndex((prevIndex) => (prevIndex === 0 ? imageUrls.length - 1 : prevIndex - 1));
37+
setNextImageIndex((prevIndex) => (prevIndex === 0 ? media.length - 1 : prevIndex - 1));
4238
setSwitchedImageManually(autoSwitch);
4339
}
4440

4541
function goToNextImage(autoSwitch = false) {
46-
setNextImageIndex((prevIndex) => (prevIndex === imageUrls.length - 1 ? 0 : prevIndex + 1));
42+
setNextImageIndex((prevIndex) => (prevIndex === media.length - 1 ? 0 : prevIndex + 1));
4743
setSwitchedImageManually(autoSwitch);
4844
}
4945

5046
return (
51-
<div className="mb-8 w-full justify-center base:h-[15rem] md:h-[18rem] object-cover relative ">
47+
<div className="mb-8 w-full justify-center base:h-[15rem] md:h-[18rem] relative ">
5248
<div className="perspective-1200 transform-style-preserve-3d ">
5349
<motion.div
5450
transition={spring}
@@ -59,7 +55,11 @@ const ImageSlider: React.FC<ImageSliderProps> = (props) => {
5955
backfaceVisibility: "hidden",
6056
position: "absolute",
6157
}}>
62-
<img className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto" src={imageUrls[imageIndex]} onLoad={onLoad} />
58+
{media[imageIndex].type.includes("video") ? (
59+
<video autoPlay loop src={media[imageIndex].url} className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto"></video>
60+
) : (
61+
<img className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto" src={media[imageIndex].url} onLoad={onLoad} />
62+
)}
6363
</motion.div>
6464
{makeFlip && (
6565
<motion.div
@@ -76,18 +76,20 @@ const ImageSlider: React.FC<ImageSliderProps> = (props) => {
7676
onAnimationComplete={() => {
7777
setImageIndex(nextImageIndex);
7878
}}>
79-
<img className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto" src={imageUrls[nextImageIndex]} onLoad={onLoad} />
79+
{media[nextImageIndex].type.includes("video") ? (
80+
<video autoPlay loop src={media[imageIndex].url} className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto"></video>
81+
) : (
82+
<img className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto" src={media[nextImageIndex].url} onLoad={onLoad} />
83+
)}
8084
</motion.div>
8185
)}
8286
</div>
83-
{imageUrls.length > 1 && (
87+
{media.length > 1 && (
8488
<div className="z-10 flex flex-row h-full w-full justify-center items-end my-2 mt-8 gap-2 ">
85-
<Button className="p-1 h-6 !rounded-3xl" disabled={makeFlip}>
86-
{" "}
89+
<Button className="p-1 h-6 !rounded-3xl" disabled={makeFlip}>
8790
<ArrowLeft onClick={() => goToPreviousImage(true)} />
8891
</Button>
8992
<Button className="p-1 h-6 !rounded-3xl" disabled={makeFlip}>
90-
{" "}
9193
<ArrowRight onClick={() => goToNextImage(true)} />{" "}
9294
</Button>
9395
</div>

‎src/components/NftMediaComponent.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { NftMedia } from "libs/types";
2+
import { cn } from "libs/utils";
3+
import React from "react";
4+
import ImageSlider from "./ImageSlider";
5+
6+
interface NftMediaComponentProps {
7+
nftMedia: NftMedia[];
8+
isLoading?: boolean;
9+
mediaStyle?: string;
10+
}
11+
12+
const NftMediaComponent: React.FC<NftMediaComponentProps> = (props) => {
13+
const { nftMedia, isLoading, mediaStyle } = props;
14+
return (
15+
<div>
16+
{nftMedia.length === 0 && <img src="https://media.elrond.com/nfts/thumbnail/default.png" />}
17+
{nftMedia.length === 1 ? (
18+
<div className={cn("flex justify-center rounded-3xl overflow-hidden", mediaStyle)}>
19+
{nftMedia[0].fileType === "video/mp4" ? (
20+
<video autoPlay loop src={nftMedia[0]?.url} className="scale-[1.8]" />
21+
) : (
22+
<img className="rounded-3xl" src={!isLoading ? nftMedia[0]?.url : "https://media.elrond.com/nfts/thumbnail/default.png"} />
23+
)}
24+
</div>
25+
) : (
26+
<div className=" flex">
27+
<ImageSlider
28+
media={nftMedia.map((item) => ({
29+
url: item.url,
30+
type: item.fileType,
31+
}))}
32+
/>{" "}
33+
</div>
34+
)}
35+
</div>
36+
);
37+
};
38+
39+
export default NftMediaComponent;

‎src/components/ThreeDCard.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,19 @@ interface ThreeDCardProps {
1515

1616
export function ThreeDCard(props: ThreeDCardProps) {
1717
const { tokenIdentifier, title, nftImgUrl, supply, rating, wantedTokenAmount, offerIndex } = props;
18+
1819
return (
1920
<CardContainer className="inter-var h-84 w-64 mx-2" containerClassName="py-8">
2021
<CardBody className="bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border ">
2122
<CardItem translateZ="100" className=" w-full flex flex-row items-center justify-center mt-4">
2223
<a href={`${MARKETPLACE_DETAILS_PAGE}${tokenIdentifier}${offerIndex ? "/offer-" + offerIndex : ""}`} target="_blank" className="cursor-pointer">
23-
<img src={nftImgUrl} className="h-48 w-48 object-cover rounded-3xl group-hover/card:shadow-xl" alt="thumbnail" />
24+
{nftImgUrl.includes(".mp4") ? (
25+
<div className="flex relative h-48 w-48 rounded-3xl overflow-hidden justify-center items-center">
26+
<video autoPlay loop src={nftImgUrl} className="scale-[1.8] "></video>
27+
</div>
28+
) : (
29+
<img src={nftImgUrl} className="h-48 w-48 object-cover rounded-3xl group-hover/card:shadow-xl" alt="thumbnail" />
30+
)}
2431
</a>
2532
</CardItem>
2633
<CardItem translateZ="50" className=" max-w-48 elipsis truncate mt-4 text-md font-bold text-neutral-600 dark:text-white">

‎src/libs/types/common.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,10 @@ export interface TrendingNft {
1818
tokenIdentifier: string;
1919
rating: number;
2020
}
21+
export interface NftMedia {
22+
url: string;
23+
originalUrl: string;
24+
thumbnailUrl: string;
25+
fileType: string;
26+
fileSize: number;
27+
}

‎src/pages/Account/MyListed/index.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import { createNftId } from "libs/utils/token";
1010
import { HeaderComponent } from "components/Layout/HeaderComponent";
1111
import { Card, CardContent } from "libComponents/Card";
1212
import { ExternalLink } from "lucide-react";
13+
import ImageSlider from "components/ImageSlider";
14+
import NftMediaComponent from "components/NftMediaComponent";
15+
import { NftMedia } from "libs/types";
1316

1417
export const MyListed = () => {
1518
const {
@@ -29,10 +32,8 @@ export const MyListed = () => {
2932

3033
const _totalOfferCount = await dataNftMarket.viewAddressTotalOffers(new Address(address));
3134
setOfferCount(_totalOfferCount);
32-
3335
const _offers = await dataNftMarket.viewAddressListedOffers(new Address(address));
3436
setOffers(_offers);
35-
3637
setIsLoading(false);
3738
}
3839

@@ -74,13 +75,13 @@ export const MyListed = () => {
7475
return (
7576
<div className="mb-3" key={`o-c-${index}`}>
7677
<Card className="border-[0.5px] dark:border-slate-100/30 border-slate-300 bg-transparent rounded-[2.37rem] xl:w-[330px] w-[296px] pb-5">
77-
<CardContent className="flex flex-col p-4">
78+
<CardContent className="flex flex-col p-6 ">
7879
<div className="mb-4">
79-
<img src={isDataNftLoaded ? dataNft.nftImgUrl : "https://media.elrond.com/nfts/thumbnail/default.png"} alt="dataNftImage" />
80+
<NftMediaComponent nftMedia={dataNft.media as NftMedia[]} isLoading={isLoading} mediaStyle="mb-8 base:h-[15rem] md:h-[18rem]" />
8081
</div>
8182
<div className="xl:h-[300px] h-[315px]">
8283
<div className="mb-1">
83-
<h5 className="text-center !text-xl !font-[Clash-Medium] pb-2">Offer Detail</h5>
84+
<h5 className="text-start !text-xl !font-[Clash-Medium] pb-2">Offer Detail</h5>
8485
</div>
8586
<div className="grid grid-cols-12 mb-1">
8687
<span className="col-span-4 opacity-6">Identifier:</span>
@@ -101,7 +102,7 @@ export const MyListed = () => {
101102
<span className="col-span-8 text-left">{offer.quantity}</span>
102103
</div>
103104

104-
<div className="mt-4 mb-1">
105+
<div className="mt-4 mb-1 text-start">
105106
<h5 className="text-center !text-xl !font-[Clash-Medium] pb-2">Data NFT Detail</h5>
106107
</div>
107108
<div className="grid grid-cols-12 mb-1">

‎src/pages/AppMarketplace/ItheumTrailblazer/ItheumTrailblazer.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@ export const ItheumTrailblazer = () => {
8181
res = await dataNft.viewDataViaMVXNativeAuth(arg);
8282
res.data = await (res.data as Blob).text();
8383
res.data = JSON.parse(res.data);
84-
console.log(res.data);
8584

8685
setData(res.data.data.reverse());
8786
setIsFetchingDataMarshal(false);

0 commit comments

Comments
 (0)