feat(SW-365): Added focal point to imagevault typings and to image component

components/Image.tsx

@@ -2,7 +2,10 @@
 
 import NextImage from "next/image"
 
-import type { ImageLoaderProps, ImageProps } from "next/image"
+import type { ImageLoaderProps } from "next/image"
+import type { CSSProperties } from "react"
+
+import type { ImageProps } from "@/types/components/image"
 
 function imageLoader({ quality, src, width }: ImageLoaderProps) {
   const hasQS = src.indexOf("?") !== -1
@@ -10,6 +13,14 @@ function imageLoader({ quality, src, width }: ImageLoaderProps) {
 }
 
 // Next/Image adds & instead of ? before the params
-export default function Image(props: ImageProps) {
-  return <NextImage {...props} loader={imageLoader} />
+export default function Image({ focalPoint, style, ...props }: ImageProps) {
+  const styles: CSSProperties = focalPoint
+    ? {
+        objectFit: "cover",
+        objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
+        ...style,
+      }
+    : { ...style }
+
+  return <NextImage {...props} style={styles} loader={imageLoader} />
 }

components/TempDesignSystem/Card/index.tsx

@@ -34,7 +34,7 @@ export default function Card({
 
   imageWidth =
     imageWidth ||
-    (backgroundImage && "dimensions" in backgroundImage
+    (backgroundImage?.dimensions
       ? backgroundImage.dimensions.aspectRatio * imageHeight
       : 420)
 

server/routers/contentstack/schemas/imageVault.ts

@@ -11,6 +11,11 @@ const metaData = z.object({
   Value: z.string().nullable(),
 })
 
+export const focalPointSchema = z.object({
+  x: z.number(),
+  y: z.number(),
+})
+
 /**
  * Defines a media asset, original or conversion
  */
@@ -94,6 +99,7 @@ export const imageVaultAssetSchema = z.object({
    * Name of the user that added the asset to ImageVault
    */
   AddedBy: z.string(),
+  FocalPoint: focalPointSchema.optional(),
 })
 
 export const imageVaultAssetTransformedSchema = imageVaultAssetSchema.transform(
@@ -124,6 +130,7 @@ export const imageVaultAssetTransformedSchema = imageVaultAssetSchema.transform(
         height: mediaConversion.Height,
         aspectRatio,
       },
+      focalPoint: rawData.FocalPoint || { x: 50, y: 50 },
     }
   }
 )

types/components/image.ts

@@ -1,9 +1,34 @@
-export type ApiImage = {
+import type { ImageProps as NextImageProps } from "next/image"
+
+import type { ImageVaultAsset } from "./imageVault"
+
+export interface FocalPoint {
+  x: number
+  y: number
+}
+
+export interface Dimensions {
+  width: number
+  height: number
+  aspectRatio: number
+}
+
+export interface Meta {
+  alt: string | undefined | null
+  caption: string | undefined | null
+}
+
+export interface ApiImage {
   id: string
   url: string
   title: string
-  meta: {
-    alt: string
-    caption: string
-  }
+  meta: Meta
+  dimensions?: Dimensions
+  focalPoint?: FocalPoint
 }
+
+export interface ImageProps extends NextImageProps {
+  focalPoint?: FocalPoint
+}
+
+export type ImageType = ImageVaultAsset | ApiImage

types/components/imageVault.ts

@@ -11,6 +11,8 @@ import { z } from "zod"
 
 import { imageVaultAssetSchema } from "@/server/routers/contentstack/schemas/imageVault"
 
+import type { FocalPoint } from "./image"
+
 export type ImageVaultAssetResponse = z.infer<typeof imageVaultAssetSchema>
 
 export type ImageVaultAsset = {
@@ -23,4 +25,5 @@ export type ImageVaultAsset = {
     aspectRatio: number
   }
   meta: { alt: string | undefined | null; caption: string | undefined | null }
+  focalPoint: FocalPoint
 }

utils/imageVault.ts

@@ -33,6 +33,7 @@ export function insertResponseToImageVaultAsset(
       height: mediaConversion.Height,
       aspectRatio,
     },
+    focalPoint: response.FocalPoint || { x: 50, y: 50 },
   }
 }