Render EmbedFallback when third-party consent is not given

components/ContentRenderer/components/Embed.tsx

@@ -1,17 +1,26 @@
+/* eslint-disable @next/next/no-img-element */
+
 'use client';
 
 import { MEDIA, useAnalytics } from '@prezly/analytics-nextjs';
 import { Elements } from '@prezly/content-renderer-react-js';
 import type { EmbedNode } from '@prezly/story-content-format';
 import { useCallback, useRef } from 'react';
 
+import { useCookieConsent } from '@/modules/CookieConsent/CookieConsentContext';
+import { ConsentCategory } from '@/modules/CookieConsent/types';
+
+import { EmbedFallback } from './EmbedFallback';
+
 interface Props {
     node: EmbedNode;
 }
 
 export function Embed({ node }: Props) {
     const { track } = useAnalytics();
     const isEventTracked = useRef(false);
+    const { consent } = useCookieConsent();
+    const hasThirdPartyConsent = consent?.categories.includes(ConsentCategory.THIRD_PARTY_COOKIES);
 
     const handlePlay = useCallback(() => {
         if (!isEventTracked.current) {
@@ -20,5 +29,9 @@ export function Embed({ node }: Props) {
         }
     }, [track]);
 
+    if (!hasThirdPartyConsent) {
+        return <EmbedFallback node={node} />;
+    }
+
     return <Elements.Embed node={node} onPlay={handlePlay} />;
 }

components/ContentRenderer/components/EmbedFallback.module.scss

@@ -0,0 +1,4 @@
+.imageFallback {
+    display: block;
+    margin: $spacing-4 0;
+}

components/ContentRenderer/components/EmbedFallback.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable @next/next/no-img-element */
+
+'use client';
+
+import type { EmbedNode } from '@prezly/story-content-format';
+import NextLink from 'next/link';
+
+import styles from './EmbedFallback.module.scss';
+
+interface Props {
+    node: EmbedNode;
+}
+
+export function EmbedFallback({ node }: Props) {
+    if (node.oembed.screenshot_url) {
+        return (
+            <NextLink className={styles.imageFallback} href={node.url} target="__blank">
+                <img
+                    src={node.oembed.screenshot_url}
+                    alt={node.oembed.title || node.oembed.description || ''}
+                />
+            </NextLink>
+        );
+    }
+
+    return null;
+}