{"version":3,"mappings":"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","names":["coverBaseStyles","borderStyles","coverTheme","coverThemeLink","covers","coversLength","RandomCover","id","size","settings","index","height","width","computeCoverSize","path","w2","h2","url1x","enlargeUrl","url2x","jsx","CoverStatus","lazy","__vitePreload","BookDetailsPopover","module","xSizes","ySizes","stretch","image","calculatedHeight","Cover","title","variant","useMemo","url1Width","url2Width","w1","sourceUrl","normalizeImageUrl","u1","u2","finalClassName","classNames","_a","jsxs","Suspense","PlaceholderCover","CoverImage"],"ignoreList":[],"sources":["../../../app/javascript/hardcover-ui/theme/components/cover.ts","../../../app/javascript/components/shared/RandomCover.tsx","../../../app/javascript/components/Cover/CoverImage.tsx"],"sourcesContent":["import { ComponentTheme } from \"hardcover-ui/types/base\";\n\nexport type CoverProps = {\n  variant: \"none\" | \"accent\" | \"primary\" | \"secondary\";\n  size: \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\";\n  settings: {\n    showStatus?: boolean;\n    stretch?: \"x\" | \"y\";\n    tooltip?: boolean;\n    details?: boolean;\n    eager?: boolean;\n    referrerId?: number;\n  };\n};\n\nconst coverBaseStyles = \"relative overflow-hidden group transition-all\";\nconst borderStyles = \"rounded-l-sm rounded-r-md border\";\n\nexport const coverTheme: ComponentTheme<CoverProps> = {\n  variant: {\n    none: coverBaseStyles,\n    primary: `${coverBaseStyles} ${borderStyles} border border-primary`,\n    accent: `${coverBaseStyles} ${borderStyles} border border-accent`,\n    secondary: `${coverBaseStyles} ${borderStyles} border border-secondary`,\n  },\n  size: {\n    xxs: \"\",\n    xs: \"\",\n    sm: \"\",\n    md: \"\",\n    lg: \"\",\n  },\n};\n\nexport type CoverLinkProps = {\n  variant: \"none\" | \"accent\" | \"primary\" | \"secondary\";\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\";\n};\n\nexport const coverThemeLink: ComponentTheme<CoverLinkProps> = {\n  variant: {\n    none: `${coverBaseStyles} border border-gray-100/20 ring-accent hover:ring-1 hover:border-accent`,\n    primary: `${coverBaseStyles} border border-primary ring-accent hover:ring-1 hover:border-accent`,\n    accent: `${coverBaseStyles} border border-accent ring-primary hover:ring-1 hover:border-primary`,\n    secondary: `${coverBaseStyles}  border border-secondary ring-accent hover:ring-1 hover:border-accent`,\n  },\n  size: {\n    xs: \"rounded-l-sm rounded-r-md shadow-sm\",\n    sm: \"rounded-l-sm rounded-r-md shadow-sm\",\n    md: \"rounded-l-sm rounded-r-md shadow-md\",\n    lg: \"rounded-l-sm rounded-r-md shadow-lg\",\n  },\n};\n","import { computeCoverSize } from \"components/Cover/CoverImage\";\nimport { CoverProps } from \"hardcover-ui/theme/components/cover\";\nimport { enlargeUrl } from \"lib/imageTools\";\n\nconst covers = [\n  \"/static/covers/cover2.webp\",\n  \"/static/covers/cover3.webp\",\n  \"/static/covers/cover1.webp\",\n  \"/static/covers/cover4.webp\",\n  \"/static/covers/cover5.webp\",\n  \"/static/covers/cover6.webp\",\n  \"/static/covers/cover7.webp\",\n  \"/static/covers/cover8.webp\",\n  \"/static/covers/cover9.webp\",\n];\n\nconst coversLength = covers.length;\n\nconst RandomCover = ({ id = 0, size, settings = {} }:{ id: number, size: CoverProps[\"size\"], settings?: CoverProps[\"settings\"];}) => {\n  const index = id % coversLength;\n  const { height, width } = computeCoverSize({ size });\n  const path = covers[index];\n\n  const w2 = Math.round(width * 1.5);\n  const h2 = Math.round(height * 1.5);\n\n  const url1x = enlargeUrl({\n    path,\n    width,\n    height\n  });\n  const url2x = enlargeUrl({\n    path,\n    width: w2,\n    height: h2,\n  });\n\n  return <img\n    alt={`Cover ${index}`} \n    src={url1x}\n    srcSet={`${url1x} ${width}w, ${url2x} ${w2}w`}\n    width={width} height={height}\n    loading={settings.eager ? \"eager\" : \"lazy\"}\n  />;\n};\n\nexport default RandomCover;\n","import { Suspense, lazy, useMemo } from \"react\";\nimport ImageType from \"types/ImageType\";\nimport classNames from \"lib/classNames\";\nimport { CoverProps, coverTheme } from \"hardcover-ui/theme/components/cover\";\nimport RandomCover from \"components/shared/RandomCover\";\nimport { enlargeUrl, normalizeImageUrl } from \"lib/imageTools\";\n\nconst CoverStatus = lazy(() => import(\"./CoverStatus\"));\nconst BookDetailsPopover = lazy(() =>\n  import(\"features/BookDetailsPopover\").then((module) => ({\n    default: module.BookDetailsPopover,\n  }))\n);\n\nconst xSizes = {\n  lg: 180,\n  md: 100,\n  sm: 67,\n  xs: 50,\n  xxs: 33,\n};\nconst ySizes = {\n  lg: Math.floor(xSizes.lg * 1.5),\n  md: Math.floor(xSizes.md * 1.5),\n  sm: Math.floor(xSizes.sm * 1.5),\n  xs: Math.floor(xSizes.xs * 1.5),\n  xxs: Math.floor(xSizes.xxs * 1.5),\n};\n\nexport function computeCoverSize({\n  size,\n  stretch,\n  image,\n}: {\n  size: CoverProps[\"size\"];\n  stretch?: \"x\" | \"y\";\n  image?: ImageType;\n}) {\n  // Test to force proportions\n  // return {\n  //   width: xSizes[size],\n  //   height: ySizes[size],\n  // };\n\n  // No adjustments, placeholder image\n  if (!stretch) {\n    return {\n      width: xSizes[size],\n      height: ySizes[size],\n    };\n  }\n\n  // Image, but no stretch, keep proportions of the image on the width\n  if (image) {\n    if (!stretch || stretch === \"x\") {\n      const calculatedHeight = Math.round(\n        Number(xSizes[size] * (1 / (image.width / image.height)))\n      );\n      return {\n        width: xSizes[size],\n        height: calculatedHeight,\n      };\n    }\n    if (stretch === \"y\") {\n      const calculatedWidth = Math.round(\n        Number(ySizes[size] * (1 / (image.height / image.width)))\n      );\n      return {\n        width: calculatedWidth,\n        height: ySizes[size],\n      };\n    }\n  }\n\n  // Just in case. I don't think this is needed.\n  return {\n    width: xSizes[size],\n    height: ySizes[size],\n  };\n}\nexport interface Props {\n  id: number;\n  image: ImageType;\n  size?: CoverProps[\"size\"];\n  title?: string;\n  variant?: CoverProps[\"variant\"];\n  settings?: CoverProps[\"settings\"];\n}\n\nfunction Cover({ id, image, size, title, settings, variant }: Props) {\n  const { height, width } = useMemo(\n    () => computeCoverSize({ size, stretch: settings.stretch, image }),\n    [size, settings?.stretch, image?.url]\n  );\n\n  const { url1x, url1Width, url2x, url2Width } = useMemo(() => {\n    if (!width || !height) {\n      return { url1x: null, url1Width: null, url2x: null, url2Width: null };\n    }\n\n    // Use larger images than expected for mobile\n    const w1 = Math.round(width);\n    const w2 = Math.round(width * 1.5);\n\n    const sourceUrl = normalizeImageUrl(image.url);\n\n    // Use larger image than is shown due to pixel ratio\n    const u1 = enlargeUrl({\n      url: sourceUrl,\n      width: w1,\n      height: Math.round(height),\n    });\n    const u2 = enlargeUrl({\n      url: sourceUrl,\n      width: w2,\n      height: Math.round(height * 1.5),\n    });\n\n    return {\n      url1Width: w1,\n      url1x: u1,\n      url2Width: w2,\n      url2x: u2,\n    };\n  }, [width, height, image?.url]);\n\n  // const staticColor = useMemo(\n  //   () => placeholderForColor(image?.color),\n  //   [image?.url]\n  // );\n\n  // const placeholder = useMemo(() => {\n  //   const p: any = {};\n  //   if (height > 40 && width > 40) {\n  //     p.placeholder = \"blur\";\n  //     p.blurDataURL = staticColor;\n  //   }\n  //   return p;\n  // }, [height, width]);\n\n  const finalClassName = classNames(\n    coverTheme.variant[variant],\n    coverTheme.size?.[size]\n  );\n\n  return (\n    <div className={`${finalClassName} relative`}>\n      {settings.showStatus && (\n        <Suspense>\n          <CoverStatus bookId={id} size={size} referrerId={settings.referrerId} />\n        </Suspense>\n      )}\n      {settings.details && (\n        <Suspense>\n          <BookDetailsPopover bookId={id} size={size} referrerId={settings.referrerId} />\n        </Suspense>\n      )}\n      <img\n        src={url1x}\n        srcSet={`${url1x} ${url1Width}w, ${url2x} ${url2Width}w`}\n        alt={title}\n        width={width}\n        height={height}\n        loading={settings.eager ? \"eager\" : \"lazy\"}\n        // {...placeholder}\n      />\n    </div>\n  );\n}\n\ntype PlaceholderProps = {\n  id: number;\n  size: CoverProps[\"size\"];\n  title: string;\n  variant: CoverProps[\"variant\"];\n  settings?: CoverProps[\"settings\"];\n};\nexport function PlaceholderCover({\n  id,\n  size,\n  settings = {},\n  title,\n  variant,\n}: PlaceholderProps) {\n  const { height, width } = useMemo(\n    () => computeCoverSize({ size, stretch: settings?.stretch }),\n    [size, settings?.stretch]\n  );\n\n  const finalClassName = classNames(\n    coverTheme.variant[variant],\n    coverTheme.size?.[size]\n  );\n\n  return (\n    <div\n      className={finalClassName}\n      style={{ maxWidth: width, maxHeight: height }}\n    >\n      {settings.showStatus && (\n        <Suspense>\n          <CoverStatus bookId={id} size={size} referrerId={settings.referrerId} />\n        </Suspense>\n      )}\n      {settings.details && (\n        <Suspense>\n          <BookDetailsPopover bookId={id} size={size} referrerId={settings.referrerId} />\n        </Suspense>\n      )}\n      <RandomCover id={id} size={size} settings={settings} />\n      {size !== \"xs\" && (\n        <p\n          className={classNames(\n            \"text-white absolute top-0 flex items-end h-full w-full max-w-full text-left text-ellipsis font-serif break-words z-10\",\n            size === \"sm\" ? \"text-xs p-1 leading-3\" : \"\",\n            size === \"md\" ? \"text-lg p-1 leading-5\" : \"\",\n            size === \"lg\" ? \"text-3xl p-4 leading-6\" : \"\"\n          )}\n        >\n          {title ? title.split(\":\")[0] : \"\"}\n        </p>\n      )}\n    </div>\n  );\n}\n\nexport default function CoverImage({\n  id,\n  image,\n  size = \"md\",\n  title,\n  variant = \"none\",\n  settings = {},\n}: Props) {\n  if (image?.url) {\n    return (\n      <Cover\n        id={id}\n        image={image}\n        size={size}\n        title={title}\n        variant={variant}\n        settings={settings}\n      />\n    );\n  }\n  return (\n    <PlaceholderCover\n      id={id}\n      size={size}\n      title={title}\n      settings={settings}\n      variant={variant}\n    />\n  );\n}\n"],"file":"assets/CoverImage-BxZFHWTp.js"}