From 40ff902cace3d084b54c03acd9ae227c0cc5bf2d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 1 Oct 2021 10:59:46 +0200
Subject: [PATCH] Redirect youtube videos to youtuube

---
 components/links-list-item.tsx       | 4 +++-
 components/watch/video-grid-item.tsx | 5 +++--
 pages/index.tsx                      | 3 ++-
 pages/watch/index.tsx                | 3 ++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/links-list-item.tsx b/components/links-list-item.tsx
index a2022e1f9..06aefa826 100644
--- a/components/links-list-item.tsx
+++ b/components/links-list-item.tsx
@@ -6,15 +6,17 @@ type LinksListItemProps = {
   title: string;
   subtitle: string;
   badgeText?: string;
+  target?: string;
   icon?: React.ReactChild;
   hideSubtitleOnMobile?: boolean;
 };
 
 export function LinksListItem(props: LinksListItemProps) {
-  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href } = props;
+  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href, target } = props;
 
   return (
     <Link
+      target={target || '_self'}
       href={href}
       fontSize={['14px', '14px', '15px']}
       py='9px'
diff --git a/components/watch/video-grid-item.tsx b/components/watch/video-grid-item.tsx
index f25dfbf2d..e2c82b444 100644
--- a/components/watch/video-grid-item.tsx
+++ b/components/watch/video-grid-item.tsx
@@ -5,6 +5,7 @@ type VideoGridItemProps = {
   title: string;
   subtitle: string;
   date: string;
+  target?: string;
   isNew?: boolean;
   isPro?: boolean;
   colorIndex?: number;
@@ -53,10 +54,10 @@ const bgColorList = [
 ];
 
 export function VideoGridItem(props: VideoGridItemProps) {
-  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href } = props;
+  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href, target } = props;
 
   return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } shadow='xl' p='20px'
+    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } target={target || '_self'} shadow='xl' p='20px'
           rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
       <Text mb='7px' fontSize='12px' color='gray.400'>
         {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
diff --git a/pages/index.tsx b/pages/index.tsx
index 69ca9c461..cbac0608e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -95,8 +95,9 @@ export default function Home(props: HomeProps) {
           <LinksList>
             {videos.map(video => (
               <LinksListItem
+                target={'_blank'}
                 key={video.id}
-                href={`/watch/${video.id}`}
+                href={video.youtubeLink!}
                 badgeText={video.isPro ? 'PRO' : ''}
                 hideSubtitleOnMobile
                 title={video.title}
diff --git a/pages/watch/index.tsx b/pages/watch/index.tsx
index cd27baddf..cbb562b5f 100644
--- a/pages/watch/index.tsx
+++ b/pages/watch/index.tsx
@@ -28,7 +28,8 @@ export default function Watch(props: VideosProps) {
           <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
             {videos.map((video, counter) => (
               <VideoGridItem
-                href={`/watch/${video.id}`}
+                target='_blank'
+                href={video.youtubeLink!}
                 key={video.id}
                 title={video.title}
                 subtitle={video.description}