Merge pull request #110 from prezly/feature/dev-19774-setup-a-cdn-distibution-to-serve-and-resize-images-from-the

[DEV-19774] Add support for optional `baseCdnUrl` in asset-related components

Author: István Beregszászi

.gitignore

@@ -10,6 +10,7 @@ build/
 
 # Dependencies
 node_modules/
+.pnpm-store/
 # Ignoring package-lock should make the dependencies installed on CI and on fresh environments match what the package consumers would have installed.
 # See https://github.com/sindresorhus/ama/issues/479#issuecomment-310661514 for context.
 package-lock.json

package.json

@@ -86,7 +86,7 @@
         "@prezly/linear-partition": "^1.0.2",
         "@prezly/sdk": "^23.10.0",
         "@prezly/story-content-format": "^0.70.1",
-        "@prezly/uploadcare": "^2.5.0",
+        "@prezly/uploadcare": "^2.6.0",
         "@react-hookz/web": "^12.0.0",
         "classnames": "^2.2.6",
         "player.js": "^0.1.0",

src/components/CoverageCard/CoverageCard.tsx

@@ -14,6 +14,7 @@ interface Props {
     newTab: boolean;
     renderDate: (date: string) => ReactNode;
     withThumbnail: boolean;
+    baseCdnUrl?: string;
 }
 
 export function CoverageCard({
@@ -24,8 +25,9 @@ export function CoverageCard({
     newTab,
     renderDate,
     withThumbnail,
+    baseCdnUrl,
 }: Props) {
-    const imageUrl = getCoverageImageUrl(coverage);
+    const imageUrl = getCoverageImageUrl(coverage, baseCdnUrl);
     const href = coverage.attachment_oembed?.url || coverage.url;
     const autoLayout = withThumbnail && imageUrl ? layout : 'horizontal';
 

src/components/CoverageCard/getCoverageImageUrl.ts

@@ -4,17 +4,24 @@ import { UploadcareImage } from '@prezly/uploadcare';
 
 const IMAGE_WIDTH = 580 * 2;
 
-export function getCoverageImageUrl(coverage: CoverageEntry): string | null {
+export function getCoverageImageUrl(
+    coverage: CoverageEntry,
+    baseCdnUrl: string | undefined,
+): string | null {
     if (coverage.attachment_oembed && coverage.attachment_oembed.thumbnail_url) {
         return coverage.attachment_oembed.thumbnail_url;
     }
 
     // @ts-expect-error `isImage` is not defined in the type, but it is present
     if (coverage.attachment && coverage.attachment.isImage) {
         try {
-            const image = UploadcareImage.createFromPrezlyStoragePayload(
-                coverage.attachment as UploadedImage,
-            );
+            const image = baseCdnUrl
+                ? UploadcareImage.createFromPrezlyStoragePayload(
+                      coverage.attachment as UploadedImage,
+                  ).withBaseCdnUrl(baseCdnUrl)
+                : UploadcareImage.createFromPrezlyStoragePayload(
+                      coverage.attachment as UploadedImage,
+                  );
             return image.resize(IMAGE_WIDTH).cdnUrl;
         } catch {
             return null;

src/elements/Attachment/Attachment.tsx

@@ -10,11 +10,14 @@ import './Attachment.scss';
 
 interface Props extends Omit<HTMLAttributes<HTMLAnchorElement>, 'children'> {
     node: AttachmentNode;
+    baseCdnUrl?: string;
 }
 
-export function Attachment({ className, node, ...props }: Props) {
+export function Attachment({ className, node, baseCdnUrl, ...props }: Props) {
     const { description, file } = node;
-    const attachment = UploadcareFile.createFromPrezlyStoragePayload(file);
+    const attachment = baseCdnUrl
+        ? UploadcareFile.createFromPrezlyStoragePayload(file).withBaseCdnUrl(baseCdnUrl)
+        : UploadcareFile.createFromPrezlyStoragePayload(file);
     const isUsingCustomTitle = Boolean(description);
 
     return (

src/elements/Gallery/Gallery.tsx

@@ -18,6 +18,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     node: GalleryNode;
     onImageDownload?: (image: UploadcareImage) => void;
     onPreviewOpen?: (image: UploadcareImage) => void;
+    baseCdnUrl?: string;
 }
 
 interface Tile {
@@ -26,12 +27,19 @@ interface Tile {
     height: number;
 }
 
-export function Gallery({ className, node, onImageDownload, onPreviewOpen, ...props }: Props) {
+export function Gallery({
+    className,
+    node,
+    onImageDownload,
+    onPreviewOpen,
+    baseCdnUrl,
+    ...props
+}: Props) {
     const [rect, ref] = useMeasure<HTMLDivElement>();
     const galleryWidth = rect?.width || DEFAULT_GALLERY_WIDTH_SSR[node.layout];
     const margin = IMAGE_PADDING[node.padding];
     const idealHeight = IMAGE_SIZE[node.thumbnail_size] + 2 * margin;
-    const originalImages = useMemo(() => extractImages(node), [node]);
+    const originalImages = useMemo(() => extractImages(node, baseCdnUrl), [node, baseCdnUrl]);
     const calculatedLayout = calculateLayout({
         idealHeight,
         images: originalImages,
@@ -120,9 +128,13 @@ function Row(props: {
     );
 }
 
-function extractImages(node: GalleryNode): UploadcareImage[] {
+function extractImages(node: GalleryNode, baseCdnUrl: string | undefined): UploadcareImage[] {
     return node.images.map(({ caption, file }) =>
-        UploadcareImage.createFromPrezlyStoragePayload(file, caption),
+        baseCdnUrl
+            ? UploadcareImage.createFromPrezlyStoragePayload(file, caption).withBaseCdnUrl(
+                  baseCdnUrl,
+              )
+            : UploadcareImage.createFromPrezlyStoragePayload(file, caption),
     );
 }
 

src/elements/Image/Image.tsx

@@ -15,6 +15,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     node: ImageNode;
     onDownload?: (image: UploadcareImage) => void;
     onPreviewOpen?: (image: UploadcareImage) => void;
+    baseCdnUrl?: string;
 }
 
 function getContainerStyle(node: ImageNode): CSSProperties {
@@ -37,7 +38,15 @@ const NEW_TAB_ATTRIBUTES: Partial<AnchorHTMLAttributes<HTMLAnchorElement>> = {
     rel: 'noopener noreferrer',
 };
 
-export function Image({ children, className, node, onDownload, onPreviewOpen, ...props }: Props) {
+export function Image({
+    children,
+    className,
+    node,
+    onDownload,
+    onPreviewOpen,
+    baseCdnUrl,
+    ...props
+}: Props) {
     const { file, href, align, layout } = node;
 
     const isNewTab = node.new_tab ?? true;
@@ -46,7 +55,13 @@ export function Image({ children, className, node, onDownload, onPreviewOpen, ..
 
     const [isPreviewOpen, setIsPreviewOpen] = useState<boolean>(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const image = useMemo(() => UploadcareImage.createFromPrezlyStoragePayload(file), [file.uuid]);
+    const image = useMemo(
+        () =>
+            baseCdnUrl
+                ? UploadcareImage.createFromPrezlyStoragePayload(file).withBaseCdnUrl(baseCdnUrl)
+                : UploadcareImage.createFromPrezlyStoragePayload(file),
+        [file, baseCdnUrl],
+    );
 
     function handleRolloverClick() {
         setIsPreviewOpen(true);