Merge pull request #953 from prezly/fix/care-5740-media-gallery-bookm…

…arks-show-null-where-gallery-has-no

[CARE-5740] Fix media gallery page meta description

modules/Gallery/Gallery.tsx

@@ -1,6 +1,9 @@
-import type { NewsroomGallery } from '@prezly/sdk';
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { NewsroomGallery } from '@prezly/sdk';
 import { getAssetsUrl, getGalleryThumbnail, getUploadcareGroupUrl } from '@prezly/theme-kit-core';
+import { translations } from '@prezly/theme-kit-intl';
 import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
 
 import { ContentRenderer, StoryLinks } from '@/components';
 
@@ -14,7 +17,7 @@ interface Props {
     gallery: NewsroomGallery;
 }
 
-function Gallery({ gallery }: Props) {
+export default function Gallery({ gallery }: Props) {
     const { content, name, uploadcare_group_uuid, description } = gallery;
     const galleryThumbnail = getGalleryThumbnail(gallery);
 
@@ -26,10 +29,13 @@ function Gallery({ gallery }: Props) {
         }
     }, []);
 
+    const metaDescription = useGalleryPageMetaDescription(gallery);
+
     return (
         <Layout
             title={name}
             imageUrl={galleryThumbnail ? getAssetsUrl(galleryThumbnail.uuid) : undefined}
+            description={metaDescription}
         >
             <div className={styles.container}>
                 <h1 className={styles.title}>{name}</h1>
@@ -48,4 +54,24 @@ function Gallery({ gallery }: Props) {
     );
 }
 
-export default Gallery;
+function useGalleryPageMetaDescription(gallery: NewsroomGallery) {
+    const { formatMessage } = useIntl();
+    const description = gallery.description?.trim() ?? '';
+
+    if (gallery.type === NewsroomGallery.Type.IMAGE) {
+        const imagesCount = formatMessage(translations.mediaGallery.imagesCount, {
+            imagesCount: gallery.images_number,
+        });
+
+        return [imagesCount, description].filter(Boolean).join(' - ');
+    }
+
+    if (gallery.type === NewsroomGallery.Type.VIDEO) {
+        const videosCount = formatMessage(translations.mediaGallery.videosCount, {
+            videosCount: gallery.videos_number,
+        });
+        return [videosCount, description].filter(Boolean).join(' - ');
+    }
+
+    return description;
+}

package.json

@@ -34,9 +34,9 @@
     "@prezly/content-renderer-react-js": "0.38.4",
     "@prezly/sdk": "21.6.0",
     "@prezly/story-content-format": "0.65.1",
-    "@prezly/theme-kit-core": "7.5.0",
-    "@prezly/theme-kit-intl": "7.5.0",
-    "@prezly/theme-kit-nextjs": "7.5.0",
+    "@prezly/theme-kit-core": "7.5.1",
+    "@prezly/theme-kit-intl": "7.5.1",
+    "@prezly/theme-kit-nextjs": "7.5.1",
     "@prezly/uploadcare": "2.4.4",
     "@prezly/uploadcare-image": "0.3.2",
     "@react-hookz/web": "14.7.1",