litruv
0cbc5d9a1c
All checks were successful
Trigger cinny-mobile / dispatch (push) Successful in 1s
Integrate profile effects, nameplates, and avatar decorations with live catalog browsing, Matrix profile storage, and rendering across user heroes, DMs, messages, and the sidebar avatar.
51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { DiscordCollectibleItem } from '../../../utils/discordCollectibles';
|
|
import {
|
|
isCatalogVideoPreview,
|
|
pickCatalogAnimatedPreviewUrl,
|
|
pickCatalogStaticPreviewUrl,
|
|
} from '../../../utils/collectibleAssets';
|
|
|
|
type CollectiblePreviewMediaProps = {
|
|
item: DiscordCollectibleItem;
|
|
className?: string;
|
|
restartToken?: number;
|
|
};
|
|
|
|
export function CollectiblePreviewMedia({
|
|
item,
|
|
className,
|
|
restartToken = 0,
|
|
}: CollectiblePreviewMediaProps) {
|
|
const staticUrl = pickCatalogStaticPreviewUrl(item);
|
|
const animatedUrl = pickCatalogAnimatedPreviewUrl(item);
|
|
const activeUrl = animatedUrl ?? staticUrl;
|
|
|
|
if (!activeUrl) return null;
|
|
|
|
if (animatedUrl && isCatalogVideoPreview(animatedUrl)) {
|
|
return (
|
|
<video
|
|
key={restartToken}
|
|
className={className}
|
|
src={animatedUrl}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<img
|
|
key={restartToken}
|
|
className={className}
|
|
src={activeUrl}
|
|
alt=""
|
|
loading="lazy"
|
|
draggable={false}
|
|
/>
|
|
);
|
|
}
|