@venuecms/sdk-next
Version:
This is a work in progress and is heavily in flux until we launch 1.0 in February.
1 lines • 4.02 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/VenueImage/ResponsiveImage.tsx"],"sourcesContent":["import Image, { ImageProps, StaticImageData } from \"next/image\";\n\nconst defaultBlur =\n \"data:image/webp;base64,UklGRv4DAABXRUJQVlA4WAoAAAAgAAAAgwEAkwAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggEAIAANAdAJ0BKoQBlAA+tVilTqktq6Ij9mohsBaJaW7gAPxl327WrOr58lOBv3B2bV5tXZG3Cs6EfYIdF424VnQj3sc4AMwGX1tsW6mMzpnfFGE1GqNdd/F7s678DobD7FfMxZq6bbtOzeddTkEpR+67ecBjZeqt6WbksaOXRpgBgEOOz4uFCd7CmYlDgXL/btUenqYAvWU/dHQyD2WRrg4L8jdr+i+96BUwSEAuxzz/yZyIpjDAU3sa721c0j+AMO4HenRSOGLzlakWd611T6K5KqXs8Am4keQ1qQED9127pMUPWP9qY5XXO1FJSju/YBoKBjsg3KYTOZAA/vUMRConj2py6XdVy2rj5AFT3UUJuYDcedD9qv+/wNrkmRL5Q+Q/p3tAMxss1zgMyXdiAuRB3G81Lg7asSIQDcl2oLiGi/r9KhPwmr3o19NXEMyqHKAFFkajHBu1F7wU9laytcLsMPFdOTmAjafCJvui62qPOt3Uq0lfNJSWaGE20X7xAR/eg4w/RSRrRSqyst9YYCZexkg5Vu30Rxz3KySFBqy+xh9KAqRuzi1iU1DEeNRWTaXMfqO4JJnl+1ljW0Gynj147omoWIfGrzVBoiEMIAft8agFKSUudUje3Gsc4cSHkqqKLhR1ZGJgAeKbNPVn3RIvYRgVcCyiJLbwIwf9aK6q7hN2psdlEPjMdq4oNmLAqSwAAA==\";\n\nexport const ResponsiveImage = async ({\n src,\n fallback,\n metadata,\n ...props\n}: {\n src: string;\n fallback?: StaticImageData;\n metadata?: any;\n} & Partial<ImageProps>) => {\n const remoteImageProps = src\n ? {\n img: {\n src,\n },\n base64: defaultBlur,\n }\n : {\n img: { src: fallback?.src || defaultBlur },\n base64: defaultBlur,\n };\n\n // Handle image focusing\n const center = { x: 0.5, y: 0.5 };\n if (metadata?.focus) {\n const y = (-metadata.focus.y + 1) / 2;\n if (y > 0.5) {\n const yWithOffest = y;\n center.y = yWithOffest > 1 ? 1 : yWithOffest;\n } else {\n const yWithOffest = y;\n center.y = yWithOffest < 0 ? 0 : yWithOffest;\n }\n\n const x = (-metadata.focus.x + 1) / 2;\n if (x > 0.5) {\n const xWithOffest = x;\n center.x = xWithOffest > 1 ? 1 : xWithOffest;\n } else {\n const xWithOffest = x;\n center.x = xWithOffest < 0 ? 0 : xWithOffest;\n }\n }\n\n return (\n <Image\n alt={\"\"}\n src={remoteImageProps.img.src}\n fill={true}\n placeholder=\"blur\"\n blurDataURL={remoteImageProps.base64}\n objectFit=\"cover\"\n objectPosition={`${center.x * 100}% ${center.y * 100}%`}\n {...props}\n />\n );\n};\n\nexport default ResponsiveImage;\n"],"mappings":";AAAA,OAAOA,MAA4C,aAkD/C,cAAAC,MAAA,oBAhDJ,IAAMC,EACJ,03CAEWC,EAAkB,MAAO,CACpC,IAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAI4B,CAC1B,IAAMC,EAAmBJ,EACrB,CACE,IAAK,CACH,IAAAA,CACF,EACA,OAAQF,CACV,EACA,CACE,IAAK,CAAE,IAAKG,GAAU,KAAOH,CAAY,EACzC,OAAQA,CACV,EAGEO,EAAS,CAAE,EAAG,GAAK,EAAG,EAAI,EAChC,GAAIH,GAAU,MAAO,CACnB,IAAMI,GAAK,CAACJ,EAAS,MAAM,EAAI,GAAK,EACpC,GAAII,EAAI,GAAK,CACX,IAAMC,EAAcD,EACpBD,EAAO,EAAIE,EAAc,EAAI,EAAIA,CACnC,KAAO,CACL,IAAMA,EAAcD,EACpBD,EAAO,EAAIE,EAAc,EAAI,EAAIA,CACnC,CAEA,IAAMC,GAAK,CAACN,EAAS,MAAM,EAAI,GAAK,EACpC,GAAIM,EAAI,GAAK,CACX,IAAMC,EAAcD,EACpBH,EAAO,EAAII,EAAc,EAAI,EAAIA,CACnC,KAAO,CACL,IAAMA,EAAcD,EACpBH,EAAO,EAAII,EAAc,EAAI,EAAIA,CACnC,CACF,CAEA,OACEZ,EAACD,EAAA,CACC,IAAK,GACL,IAAKQ,EAAiB,IAAI,IAC1B,KAAM,GACN,YAAY,OACZ,YAAaA,EAAiB,OAC9B,UAAU,QACV,eAAgB,GAAGC,EAAO,EAAI,GAAG,KAAKA,EAAO,EAAI,GAAG,IACnD,GAAGF,EACN,CAEJ,EAEOO,EAAQX","names":["Image","jsx","defaultBlur","ResponsiveImage","src","fallback","metadata","props","remoteImageProps","center","y","yWithOffest","x","xWithOffest","ResponsiveImage_default"]}