working now
This commit is contained in:
parent
0e49fa7fe8
commit
2f06302873
|
@ -113,7 +113,7 @@ const VideoArtContent = ({
|
||||||
|
|
||||||
const content =
|
const content =
|
||||||
likelyVideo &&
|
likelyVideo &&
|
||||||
likelyVideo.startsWith('https://watch.videodelivery.net/') ? (
|
likelyVideo.startsWith('https://watch.videodelivery.net/') ? (
|
||||||
<div className={`${className} square`}>
|
<div className={`${className} square`}>
|
||||||
<Stream
|
<Stream
|
||||||
streamRef={(e: any) => playerRef(e)}
|
streamRef={(e: any) => playerRef(e)}
|
||||||
|
@ -159,6 +159,39 @@ const VideoArtContent = ({
|
||||||
return content;
|
return content;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const HTMLContent = ({
|
||||||
|
uri,
|
||||||
|
animationUrl,
|
||||||
|
className,
|
||||||
|
style,
|
||||||
|
files,
|
||||||
|
}: {
|
||||||
|
uri?: string;
|
||||||
|
animationUrl?: string;
|
||||||
|
className?: string;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
files?: (MetadataFile | string)[];
|
||||||
|
}) => {
|
||||||
|
const htmlURL =
|
||||||
|
files && files.length > 0 && typeof files[0] === 'string'
|
||||||
|
? files[0]
|
||||||
|
: animationUrl;
|
||||||
|
const { isLoading } = useCachedImage(htmlURL || '', true);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<CachedImageContent
|
||||||
|
uri={uri}
|
||||||
|
className={className}
|
||||||
|
preview={false}
|
||||||
|
style={{ width: 300, ...style }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" sandbox="allow-scripts" frameBorder="0" src={htmlURL} className={className} style={style}></iframe>;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
export const ArtContent = ({
|
export const ArtContent = ({
|
||||||
category,
|
category,
|
||||||
className,
|
className,
|
||||||
|
@ -223,6 +256,19 @@ export const ArtContent = ({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (category === 'html' || animationUrlExt === 'html'
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<HTMLContent
|
||||||
|
uri={uri}
|
||||||
|
animationUrl={animationURL}
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
files={files}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const content =
|
const content =
|
||||||
category === 'video' ? (
|
category === 'video' ? (
|
||||||
<VideoArtContent
|
<VideoArtContent
|
||||||
|
|
|
@ -86,10 +86,15 @@ code {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.ant-image-img,
|
.ant-image-img,
|
||||||
video {
|
video{
|
||||||
height: 300px;
|
height: 300px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
iframe {
|
||||||
|
height: 300px;
|
||||||
|
object-fit: cover;
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.placebid {
|
.placebid {
|
||||||
|
|
|
@ -9,6 +9,7 @@ import {
|
||||||
Skeleton,
|
Skeleton,
|
||||||
List,
|
List,
|
||||||
Card,
|
Card,
|
||||||
|
AutoComplete,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
import { useArt, useExtendedArt } from '../../hooks';
|
import { useArt, useExtendedArt } from '../../hooks';
|
||||||
|
@ -79,7 +80,7 @@ export const ArtView = () => {
|
||||||
<Row ref={ref}>
|
<Row ref={ref}>
|
||||||
<Col xs={{ span: 24 }} md={{ span: 12 }} style={{ padding: '30px' }}>
|
<Col xs={{ span: 24 }} md={{ span: 12 }} style={{ padding: '30px' }}>
|
||||||
<ArtContent
|
<ArtContent
|
||||||
style={{ width: 300 }}
|
style={{ width: '300px', height: '300px', margin: '0 auto' }}
|
||||||
height={300}
|
height={300}
|
||||||
width={300}
|
width={300}
|
||||||
className="artwork-image"
|
className="artwork-image"
|
||||||
|
|
|
@ -336,7 +336,7 @@ const UploadStep = (props: {
|
||||||
case MetadataCategory.VR:
|
case MetadataCategory.VR:
|
||||||
return 'Upload your AR/VR creation (GLB)';
|
return 'Upload your AR/VR creation (GLB)';
|
||||||
case MetadataCategory.HTML:
|
case MetadataCategory.HTML:
|
||||||
return 'Upload your HTML File (.html)';
|
return 'Upload your HTML File (HTML)';
|
||||||
default:
|
default:
|
||||||
return 'Please go back and choose a category';
|
return 'Please go back and choose a category';
|
||||||
}
|
}
|
||||||
|
@ -352,6 +352,8 @@ const UploadStep = (props: {
|
||||||
return '.mp4,.mov,.webm';
|
return '.mp4,.mov,.webm';
|
||||||
case MetadataCategory.VR:
|
case MetadataCategory.VR:
|
||||||
return '.glb';
|
return '.glb';
|
||||||
|
case MetadataCategory.HTML:
|
||||||
|
return '.html';
|
||||||
default:
|
default:
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
@ -491,7 +493,7 @@ const UploadStep = (props: {
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
image: coverFile?.name || '',
|
image: coverFile?.name || '',
|
||||||
animation_url: mainFile && mainFile.name,
|
animation_url: (props.attributes.properties?.category !== MetadataCategory.Image && customURL) ? customURL : mainFile && mainFile.name,
|
||||||
});
|
});
|
||||||
props.setFiles([coverFile, mainFile].filter(f => f) as File[]);
|
props.setFiles([coverFile, mainFile].filter(f => f) as File[]);
|
||||||
props.confirm();
|
props.confirm();
|
||||||
|
@ -1150,7 +1152,7 @@ const Congrats = (props: {
|
||||||
text: "I've created a new NFT artwork on Metaplex, check it out!",
|
text: "I've created a new NFT artwork on Metaplex, check it out!",
|
||||||
url: `${
|
url: `${
|
||||||
window.location.origin
|
window.location.origin
|
||||||
}/#/art/${props.nft?.metadataAccount.toString()}`,
|
}/#/art/${props.nft?.metadataAccount.toString()}`,
|
||||||
hashtags: 'NFT,Crypto,Metaplex',
|
hashtags: 'NFT,Crypto,Metaplex',
|
||||||
// via: "Metaplex",
|
// via: "Metaplex",
|
||||||
related: 'Metaplex,Solana',
|
related: 'Metaplex,Solana',
|
||||||
|
|
Loading…
Reference in New Issue