fix: redirect to watch youtube video without consent (#4117)

dailydotdev · Jan 28, 2025 · 3163739 · 3163739
1 parent a261a27
commit 3163739
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 35 deletions.
diff --git a/packages/shared/src/components/post/PostContent.tsx b/packages/shared/src/components/post/PostContent.tsx
@@ -159,12 +159,9 @@ export function PostContentRaw({
           </div>
           {isVideoType && (
             <YoutubeVideo
-              title={title}
+              placeholderProps={{ post, onWatchVideo: onReadArticle }}
               videoId={post.videoId}
               className="mb-7"
-              image={post.image}
-              source={post.source}
-              onWatchVideo={onReadArticle}
             />
           )}
           {post.summary && (

diff --git a/packages/shared/src/components/post/ShareYouTubeContent.tsx b/packages/shared/src/components/post/ShareYouTubeContent.tsx
@@ -70,11 +70,11 @@ function ShareYouTubeContent({
         )}
       >
         <YoutubeVideo
-          title={post?.sharedPost?.title}
           videoId={post?.sharedPost?.videoId}
-          image={post?.sharedPost?.image}
-          source={post?.sharedPost?.source}
-          onWatchVideo={onReadArticle}
+          placeholderProps={{
+            post: post.sharedPost,
+            onWatchVideo: onReadArticle,
+          }}
         />
       </SharedLinkContainer>
     </>

diff --git a/packages/shared/src/components/video/YoutubeVideo.spec.tsx b/packages/shared/src/components/video/YoutubeVideo.spec.tsx
@@ -13,11 +13,12 @@ const renderComponent = (): RenderResult => {
   return render(
     <TestBootProvider client={client}>
       <YoutubeVideo
-        title="test title"
+        placeholderProps={{
+          post: { ...sharePost, title: 'test title' },
+          onWatchVideo: jest.fn(),
+        }}
         videoId="igZCEr3HwCg"
         data-testid="iframeId"
-        image={sharePost.image}
-        source={sharePost.source}
       />
     </TestBootProvider>,
   );

diff --git a/packages/shared/src/components/video/YoutubeVideo.tsx b/packages/shared/src/components/video/YoutubeVideo.tsx
@@ -1,30 +1,28 @@
-import type { ReactElement } from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
 import React from 'react';
 import { useAuthContext } from '../../contexts/AuthContext';
 import { GdprConsentKey } from '../../hooks/useCookieBanner';
-import type { Source } from '../../graphql/sources';
+import type { YoutubeVideoWithoutConsentProps } from './YoutubeVideoWithoutConsent';
 import { YoutubeVideoWithoutConsent } from './YoutubeVideoWithoutConsent';
 import { YoutubeVideoBackground, YoutubeVideoContainer } from './common';
 import { useConsentCookie } from '../../hooks/useCookieConsent';
 
-interface YoutubeVideoProps {
+interface YoutubeVideoProps extends HTMLAttributes<HTMLIFrameElement> {
   videoId: string;
   className?: string;
-  title: string;
-  image: string;
-  source: Source;
-  onWatchVideo?: () => void;
+  placeholderProps: Pick<
+    YoutubeVideoWithoutConsentProps,
+    'post' | 'onWatchVideo'
+  >;
 }
 
 const YoutubeVideo = ({
   videoId,
   className,
-  title,
-  image,
-  source,
-  onWatchVideo,
+  placeholderProps,
   ...props
 }: YoutubeVideoProps): ReactElement => {
+  const { title } = placeholderProps.post;
   const { isAuthReady, isGdprCovered } = useAuthContext();
   const { cookieExists, saveCookies } = useConsentCookie(
     GdprConsentKey.Marketing,
@@ -41,10 +39,7 @@ const YoutubeVideo = ({
   if (isGdprCovered && !cookieExists) {
     return (
       <YoutubeVideoWithoutConsent
-        title={title}
-        image={image}
-        source={source}
-        onWatchVideo={onWatchVideo}
+        {...placeholderProps}
         onAcceptCookies={saveCookies}
       />
     );
@@ -53,12 +48,12 @@ const YoutubeVideo = ({
   return (
     <YoutubeVideoContainer className={className}>
       <iframe
+        {...props}
         title={title}
         src={`https://www.youtube-nocookie.com/embed/${videoId}`}
         allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
         allowFullScreen
         className="absolute inset-0 aspect-video w-full border-0"
-        {...props}
       />
     </YoutubeVideoContainer>
   );

diff --git a/packages/shared/src/components/video/YoutubeVideoWithoutConsent.tsx b/packages/shared/src/components/video/YoutubeVideoWithoutConsent.tsx
@@ -6,13 +6,12 @@ import { Typography, TypographyType } from '../typography/Typography';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { PlayIcon } from '../icons';
 import classed from '../../lib/classed';
-import type { Source } from '../../graphql/sources';
+import type { Post } from '../../graphql/posts';
+import { anchorDefaultRel } from '../../lib/strings';
 
-interface YoutubeVideoWithoutConsentProps {
+export interface YoutubeVideoWithoutConsentProps {
+  post: Post;
   className?: string;
-  title: string;
-  image: string;
-  source: Source;
   onWatchVideo: () => void;
   onAcceptCookies: () => void;
 }
@@ -29,12 +28,12 @@ const Background = classed(
 
 export function YoutubeVideoWithoutConsent({
   className,
-  image,
-  title,
-  source,
   onWatchVideo,
   onAcceptCookies,
+  post,
 }: YoutubeVideoWithoutConsentProps): ReactElement {
+  const { title, image, source, permalink } = post;
+
   return (
     <Container className={classNames(className, 'relative')}>
       <img
@@ -71,6 +70,10 @@ export function YoutubeVideoWithoutConsent({
           className="mx-auto w-fit"
           size={ButtonSize.Small}
           onClick={onWatchVideo}
+          tag="a"
+          href={permalink}
+          target="_blank"
+          rel={anchorDefaultRel}
         >
           Watch on YouTube
         </Button>