import styled from 'styled-components' ; import NftPreviewLabel from 'components/NftPreview/NftPreviewLabel' ; import transitions from 'components/core/transitions' ; import { getMediaTypeForAssetUrl , getResizedNftImageUrlWithFallback } from 'utils/nft' ; import { NftMediaType } from 'components/core/enums' ; import { EditModeNft } from '../types' ; type Props = { editModeNft : EditModeNft ; size : number ; setNodeRef : ( node : HTMLElement | null ) => void ; } ; function StagedNftImage ( { editModeNft , size , setNodeRef , ... props } ) { const nft = editModeNft . nft ; const srcUrl = getResizedNftImageUrlWithFallback ( nft ) ; const isVideo = getMediaTypeForAssetUrl ( editModeNft . nft . image_url ) === NftMediaType . VIDEO ; return isVideo ? ( < VideoContainer ref = { setNodeRef } size = { size } { ... props } > < StyledGridVideo src = { srcUrl } /> < StyledNftPreviewLabel nft = { nft } / > < /VideoContainer>) : (<StyledGridImage srcUrl={srcUrl} ref={setNodeRef} size={size} {...props}> < StyledNftPreviewLabel nft = { nft } / > < /StyledGridImage>); } const VideoContainer = styled . div < { size : number ; } > `
  // TODO handle non square videos
  height: ${ ( { size } ) => size }px;
  width: ${ ( { size } ) => size }px;
  position: relative;
` ; const StyledGridVideo = styled . video `
  width: 100%;
` ; type StyledGridImageProps = { srcUrl : string ; size : number ; } ; const StyledGridImage = styled . div < StyledGridImageProps > `
  background-image: ${ ( { srcUrl } ) => `url(${ srcUrl })` }};
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  // TODO handle non square images
  height: ${ ( { size } ) => size }px;
  width: ${ ( { size } ) => size }px;
  position: relative;
` ; const StyledNftPreviewLabel = styled ( NftPreviewLabel ) `
  opacity: 0;
  transition: opacity ${ transitions . cubic };
` ; export default StagedNftImage ;