Merge pull request #923 from prezly/feature/dev-12744-rework-how-ifra…

…mely-embeds-are-rendered

[DEV-12744] Feature - Track when embeds and videos are played for the first time

components/ContentRenderer/ContentRenderer.tsx

@@ -3,6 +3,7 @@ import type { Node } from '@prezly/story-content-format';
 import {
     AttachmentNode,
     ButtonBlockNode,
+    EmbedNode,
     GalleryNode,
     HeadingNode,
     HtmlNode,
@@ -15,6 +16,7 @@ import {
     QuoteNode,
     StoryBookmarkNode,
     VariableNode,
+    VideoNode,
 } from '@prezly/story-content-format';
 import { useEffect } from 'react';
 
@@ -29,7 +31,7 @@ import {
     Quote,
 } from '@/components/RichText';
 
-import { Attachment, Gallery, Image, StoryBookmark, Variable } from './components';
+import { Attachment, Embed, Gallery, Image, StoryBookmark, Variable, Video } from './components';
 
 import styles from './ContentRenderer.module.scss';
 
@@ -54,6 +56,7 @@ export default function ContentRenderer({ nodes }: Props) {
                     match={ButtonBlockNode.isButtonBlockNode}
                     component={Elements.ButtonBlock}
                 />
+                <Component match={EmbedNode.isEmbedNode} component={Embed} />
                 <Component match={GalleryNode.isGalleryNode} component={Gallery} />
                 {/* Title and Subtitle heading rules must be defined above the general Heading */}
                 <Component match={HeadingNode.isTitleHeadingNode} component={Elements.Ignore} />
@@ -72,6 +75,7 @@ export default function ContentRenderer({ nodes }: Props) {
                     component={StoryBookmark}
                 />
                 <Component match={VariableNode.isVariableNode} component={Variable} />
+                <Component match={VideoNode.isVideoNode} component={Video} />
             </Renderer>
         </div>
     );

components/ContentRenderer/components/Embed.tsx

@@ -0,0 +1,24 @@
+'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';
+
+interface Props {
+    node: EmbedNode;
+}
+
+export function Embed({ node }: Props) {
+    const { track } = useAnalytics();
+    const isEventTracked = useRef(false);
+
+    const handlePlay = useCallback(() => {
+        if (!isEventTracked.current) {
+            track(MEDIA.PLAY);
+            isEventTracked.current = true;
+        }
+    }, [track]);
+
+    return <Elements.Embed node={node} onPlay={handlePlay} />;
+}

components/ContentRenderer/components/Video.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { MEDIA, useAnalytics } from '@prezly/analytics-nextjs';
+import { Elements } from '@prezly/content-renderer-react-js';
+import type { VideoNode } from '@prezly/story-content-format';
+import { useCallback, useRef } from 'react';
+
+interface Props {
+    node: VideoNode;
+}
+
+export function Video({ node }: Props) {
+    const { track } = useAnalytics();
+    const isEventTracked = useRef(false);
+
+    const handlePlay = useCallback(() => {
+        if (!isEventTracked.current) {
+            track(MEDIA.PLAY);
+            isEventTracked.current = true;
+        }
+    }, [track]);
+
+    return <Elements.Video node={node} onPlay={handlePlay} />;
+}

components/ContentRenderer/components/index.ts

@@ -1,5 +1,7 @@
 export { Attachment } from './Attachment';
+export { Embed } from './Embed';
 export { Gallery } from './Gallery';
 export { Image } from './Image';
 export { StoryBookmark } from './StoryBookmark';
 export { Variable } from './Variable';
+export { Video } from './Video';

package.json

@@ -31,7 +31,7 @@
     "@headlessui/react": "1.7.18",
     "@playwright/test": "^1.33.0",
     "@prezly/analytics-nextjs": "2.0.1",
-    "@prezly/content-renderer-react-js": "0.35.0",
+    "@prezly/content-renderer-react-js": "0.36.1",
     "@prezly/sdk": "18.3.0",
     "@prezly/story-content-format": "0.64.0",
     "@prezly/theme-kit-core": "7.1.0",