@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.45 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/VenueImage/ResponsiveImage.tsx"],"sourcesContent":["import type { MediaItem } from \"@venuecms/sdk\";\nimport 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 image = {},\n fallback,\n placeholder,\n blurDataURL,\n ...props\n}: {\n src?: string;\n image?: Partial<MediaItem>;\n fallback?: StaticImageData;\n} & Partial<ImageProps>) => {\n const { altText } = image;\n const metadata: { focus?: { x: number; y: number } } = image?.metadata ?? {};\n\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={(altText as string) ?? \"image\"}\n src={remoteImageProps.img.src}\n fill={true}\n placeholder={placeholder ?? \"blur\"}\n blurDataURL={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":"AACA,OAAOA,MAA4C,aAuD/C,cAAAC,MAAA,oBArDJ,IAAMC,EACJ,03CAEWC,EAAkB,MAAO,CACpC,IAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,GAAGC,CACL,IAI4B,CAC1B,GAAM,CAAE,QAAAC,CAAQ,EAAIL,EACdM,EAAiDN,GAAO,UAAY,CAAC,EAErEO,EAAmBR,EACrB,CACE,IAAK,CACH,IAAAA,CACF,EACA,OAAQF,CACV,EACA,CACE,IAAK,CAAE,IAAKI,GAAU,KAAOJ,CAAY,EACzC,OAAQA,CACV,EAGEW,EAAS,CAAE,EAAG,GAAK,EAAG,EAAI,EAChC,GAAIF,GAAU,MAAO,CACnB,IAAMG,GAAK,CAACH,EAAS,MAAM,EAAI,GAAK,EACpC,GAAIG,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,CAACL,EAAS,MAAM,EAAI,GAAK,EACpC,GAAIK,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,OACEhB,EAACD,EAAA,CACC,IAAMU,GAAsB,QAC5B,IAAKE,EAAiB,IAAI,IAC1B,KAAM,GACN,YAAaL,GAAe,OAC5B,YAAaC,GAAeI,EAAiB,OAC7C,UAAU,QACV,eAAgB,GAAGC,EAAO,EAAI,GAAG,KAAKA,EAAO,EAAI,GAAG,IACnD,GAAGJ,EACN,CAEJ,EAEOS,EAAQf","names":["Image","jsx","defaultBlur","ResponsiveImage","src","image","fallback","placeholder","blurDataURL","props","altText","metadata","remoteImageProps","center","y","yWithOffest","x","xWithOffest","ResponsiveImage_default"]}