Added a View Original link for NFT assets (#20709)
Co-authored-by: Will Roeder <roederw@wills-mbp.lan>
This commit is contained in:
parent
a674fe9888
commit
5a02a92013
|
@ -30,6 +30,18 @@ const ErrorPlaceHolder = () => (
|
||||||
<img src={ErrorLogo} width="120" height="120" alt="Solana Logo" />
|
<img src={ErrorLogo} width="120" height="120" alt="Solana Logo" />
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const ViewOriginalArtContentLink = ({ src }: { src: string }) => {
|
||||||
|
if (!src) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<h6 className={"header-pretitle d-flex justify-content-center mt-2"}>
|
||||||
|
<a href={src}>VIEW ORIGINAL</a>
|
||||||
|
</h6>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const CachedImageContent = ({ uri }: { uri?: string }) => {
|
const CachedImageContent = ({ uri }: { uri?: string }) => {
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||||
const [showError, setShowError] = useState<boolean>(false);
|
const [showError, setShowError] = useState<boolean>(false);
|
||||||
|
@ -65,21 +77,26 @@ const CachedImageContent = ({ uri }: { uri?: string }) => {
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{isLoading && <LoadingPlaceholder />}
|
{isLoading && <LoadingPlaceholder />}
|
||||||
<img
|
<div className={`${isLoading ? "d-none" : "d-block"}`}>
|
||||||
className={`rounded mx-auto ${isLoading ? "d-none" : "d-block"}`}
|
<img
|
||||||
src={cachedBlob}
|
className={`rounded mx-auto ${isLoading ? "d-none" : "d-block"}`}
|
||||||
alt={"nft"}
|
src={cachedBlob}
|
||||||
style={{
|
alt={"nft"}
|
||||||
width: 150,
|
style={{
|
||||||
height: "auto",
|
width: 150,
|
||||||
}}
|
maxHeight: 200,
|
||||||
onLoad={() => {
|
}}
|
||||||
setIsLoading(false);
|
onLoad={() => {
|
||||||
}}
|
setIsLoading(false);
|
||||||
onError={() => {
|
}}
|
||||||
setShowError(true);
|
onError={() => {
|
||||||
}}
|
setShowError(true);
|
||||||
/>
|
}}
|
||||||
|
/>
|
||||||
|
{uri && (
|
||||||
|
<ViewOriginalArtContentLink src={uri} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
@ -98,7 +115,6 @@ const VideoArtContent = ({
|
||||||
active?: boolean;
|
active?: boolean;
|
||||||
}) => {
|
}) => {
|
||||||
const [playerApi, setPlayerApi] = useState<StreamPlayerApi>();
|
const [playerApi, setPlayerApi] = useState<StreamPlayerApi>();
|
||||||
|
|
||||||
const playerRef = useCallback(
|
const playerRef = useCallback(
|
||||||
(ref) => {
|
(ref) => {
|
||||||
setPlayerApi(ref);
|
setPlayerApi(ref);
|
||||||
|
@ -123,8 +139,8 @@ const VideoArtContent = ({
|
||||||
|
|
||||||
const content =
|
const content =
|
||||||
likelyVideo &&
|
likelyVideo &&
|
||||||
likelyVideo.startsWith("https://watch.videodelivery.net/") ? (
|
likelyVideo.startsWith("https://watch.videodelivery.net/") ? (
|
||||||
<div className={"square"}>
|
<div className={"d-block"}>
|
||||||
<Stream
|
<Stream
|
||||||
streamRef={(e: any) => playerRef(e)}
|
streamRef={(e: any) => playerRef(e)}
|
||||||
src={likelyVideo.replace("https://watch.videodelivery.net/", "")}
|
src={likelyVideo.replace("https://watch.videodelivery.net/", "")}
|
||||||
|
@ -140,27 +156,33 @@ const VideoArtContent = ({
|
||||||
autoplay={true}
|
autoplay={true}
|
||||||
muted={true}
|
muted={true}
|
||||||
/>
|
/>
|
||||||
|
<ViewOriginalArtContentLink src={likelyVideo.replace("https://watch.videodelivery.net/", "")} />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<video
|
<div className={"d-block"}>
|
||||||
playsInline={true}
|
<video
|
||||||
autoPlay={true}
|
playsInline={true}
|
||||||
muted={true}
|
autoPlay={true}
|
||||||
controls={true}
|
muted={true}
|
||||||
controlsList="nodownload"
|
controls={true}
|
||||||
style={{ borderRadius: 12, width: 320, height: 180 }}
|
controlsList="nodownload"
|
||||||
loop={true}
|
style={{ borderRadius: 12, width: 320, height: 180 }}
|
||||||
poster={uri}
|
loop={true}
|
||||||
>
|
poster={uri}
|
||||||
{likelyVideo && <source src={likelyVideo} type="video/mp4" />}
|
>
|
||||||
{animationURL && <source src={animationURL} type="video/mp4" />}
|
{likelyVideo && <source src={likelyVideo} type="video/mp4" />}
|
||||||
{files
|
{animationURL && <source src={animationURL} type="video/mp4" />}
|
||||||
?.filter((f) => typeof f !== "string")
|
{files
|
||||||
.map((f: any) => (
|
?.filter((f) => typeof f !== "string")
|
||||||
<source src={f.uri} type={f.type} />
|
.map((f: any, index: number) => (
|
||||||
))}
|
<source key={index} src={f.uri} type={f.type} />
|
||||||
</video>
|
))}
|
||||||
);
|
</video>
|
||||||
|
{(likelyVideo || animationURL) && (
|
||||||
|
<ViewOriginalArtContentLink src={(likelyVideo || animationURL)!} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
return content;
|
return content;
|
||||||
};
|
};
|
||||||
|
@ -172,7 +194,8 @@ const HTMLContent = ({
|
||||||
animationUrl?: string;
|
animationUrl?: string;
|
||||||
files?: (MetadataJsonFile | string)[];
|
files?: (MetadataJsonFile | string)[];
|
||||||
}) => {
|
}) => {
|
||||||
const [loaded, setLoaded] = useState<boolean>(false);
|
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||||
|
const [showError, setShowError] = useState<boolean>(false);
|
||||||
const htmlURL =
|
const htmlURL =
|
||||||
files && files.length > 0 && typeof files[0] === "string"
|
files && files.length > 0 && typeof files[0] === "string"
|
||||||
? files[0]
|
? files[0]
|
||||||
|
@ -180,22 +203,35 @@ const HTMLContent = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{!loaded && <LoadingPlaceholder />}
|
{showError ? (
|
||||||
<iframe
|
<div className={"art-error-image-placeholder"}>
|
||||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
<ErrorPlaceHolder />
|
||||||
title={"html-content"}
|
<h6 className={"header-pretitle mt-2"}>Error Loading Image</h6>
|
||||||
sandbox="allow-scripts"
|
</div>
|
||||||
frameBorder="0"
|
) : (
|
||||||
src={htmlURL}
|
<>
|
||||||
className={`${loaded ? "d-block" : "d-none"}`}
|
{!isLoading && <LoadingPlaceholder />}
|
||||||
style={{ width: 320, height: 180, borderRadius: 12 }}
|
<div className={`${isLoading ? "d-block" : "d-none"}`}>
|
||||||
onLoad={() => {
|
<iframe
|
||||||
setLoaded(true);
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||||
}}
|
title={"html-content"}
|
||||||
onError={() => {
|
sandbox="allow-scripts"
|
||||||
setLoaded(true);
|
frameBorder="0"
|
||||||
}}
|
src={htmlURL}
|
||||||
></iframe>
|
style={{ width: 320, height: 180, borderRadius: 12 }}
|
||||||
|
onLoad={() => {
|
||||||
|
setIsLoading(true);
|
||||||
|
}}
|
||||||
|
onError={() => {
|
||||||
|
setShowError(true);
|
||||||
|
}}
|
||||||
|
></iframe>
|
||||||
|
{htmlURL && (
|
||||||
|
<ViewOriginalArtContentLink src={htmlURL} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue