From 9411d3d003af3cedbfc8adb10e3cb210ae22ac97 Mon Sep 17 00:00:00 2001
From: Rassl <rasul.sahibjanli@gmail.com>
Date: Wed, 1 Nov 2023 22:34:48 +0300
Subject: [PATCH] feat: add external link for youtube episodes (#534)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add external link for youtube episodes

* fix: prettier fix

* fix: using null insted of && operator

---------

Co-authored-by: Расул <rasul@MacBook-Air.local>
Co-authored-by: kevkevinpal <oapallikunnel@gmail.com>
---
 public/svg-icons/LinkIcon.svg                  |  5 +++++
 .../App/SideBar/Relevance/Episode/index.tsx    | 16 +++++++++++++++-
 src/components/App/SideBar/Relevance/index.tsx |  4 +++-
 src/components/App/SideBar/YouTube/index.tsx   |  4 +++-
 src/components/Icons/LinkIcon.tsx              | 18 ++++++++++++++++++
 5 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 public/svg-icons/LinkIcon.svg
 create mode 100644 src/components/Icons/LinkIcon.tsx

diff --git a/public/svg-icons/LinkIcon.svg b/public/svg-icons/LinkIcon.svg
new file mode 100644
index 000000000..c6b07f8a9
--- /dev/null
+++ b/public/svg-icons/LinkIcon.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icons 20x20">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M17.5661 2.056C17.7371 2.12703 17.873 2.26296 17.9441 2.434C17.9799 2.51816 17.999 2.60853 18.0001 2.7V6.9C18.0001 7.08565 17.9263 7.2637 17.795 7.39497C17.6638 7.52625 17.4857 7.6 17.3001 7.6C17.1144 7.6 16.9364 7.52625 16.8051 7.39497C16.6738 7.2637 16.6001 7.08565 16.6001 6.9V4.387L10.0971 10.897C10.032 10.9626 9.95456 11.0147 9.86926 11.0502C9.78396 11.0858 9.69246 11.1041 9.60006 11.1041C9.50765 11.1041 9.41615 11.0858 9.33085 11.0502C9.24555 11.0147 9.16813 10.9626 9.10306 10.897C9.03745 10.8319 8.98537 10.7545 8.94983 10.6692C8.91429 10.5839 8.896 10.4924 8.896 10.4C8.896 10.3076 8.91429 10.2161 8.94983 10.1308C8.98537 10.0455 9.03745 9.96807 9.10306 9.903L15.6131 3.4H13.1001C12.9144 3.4 12.7364 3.32625 12.6051 3.19497C12.4738 3.0637 12.4001 2.88565 12.4001 2.7C12.4001 2.51435 12.4738 2.3363 12.6051 2.20503C12.7364 2.07375 12.9144 2 13.1001 2H17.3001C17.3915 2.00111 17.4819 2.02013 17.5661 2.056ZM14.705 9.20463C14.8363 9.07336 15.0143 8.99961 15.2 8.99961C15.3857 8.99961 15.5637 9.07336 15.695 9.20463C15.8263 9.33591 15.9 9.51396 15.9 9.69961V13.8996C15.9 14.4566 15.6788 14.9907 15.2849 15.3845C14.8911 15.7784 14.357 15.9996 13.8 15.9996H6.1C5.54305 15.9996 5.0089 15.7784 4.61508 15.3845C4.22125 14.9907 4 14.4566 4 13.8996V6.19961C4 5.64265 4.22125 5.10851 4.61508 4.71469C5.0089 4.32086 5.54305 4.09961 6.1 4.09961H10.3C10.4857 4.09961 10.6637 4.17336 10.795 4.30463C10.9263 4.43591 11 4.61396 11 4.79961C11 4.98526 10.9263 5.16331 10.795 5.29458C10.6637 5.42586 10.4857 5.49961 10.3 5.49961H6.1C5.91435 5.49961 5.7363 5.57336 5.60503 5.70463C5.47375 5.83591 5.4 6.01396 5.4 6.19961V13.8996C5.4 14.0853 5.47375 14.2633 5.60503 14.3946C5.7363 14.5259 5.91435 14.5996 6.1 14.5996H13.8C13.9857 14.5996 14.1637 14.5259 14.295 14.3946C14.4263 14.2633 14.5 14.0853 14.5 13.8996V9.69961C14.5 9.51396 14.5737 9.33591 14.705 9.20463Z" fill="#909BAA"/>
+</g>
+</svg>
diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
index 5d7a9d19d..29afffdeb 100644
--- a/src/components/App/SideBar/Relevance/Episode/index.tsx
+++ b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -1,6 +1,7 @@
 import moment from 'moment'
 import styled from 'styled-components'
 import { BoostAmt } from '~/components/App/Helper/BoostAmt'
+import LinkIcon from '~/components/Icons/LinkIcon'
 import { Avatar } from '~/components/common/Avatar'
 import { Flex } from '~/components/common/Flex'
 import { FlexboxProps } from '~/components/common/Flex/flexbox'
@@ -48,6 +49,7 @@ type Props = {
   imageUrl: string
   showTitle?: string
   text?: string
+  link?: string
   type?: string
   name?: string
   verified?: boolean
@@ -69,6 +71,7 @@ export const Episode = ({
   text,
   name,
   profilePicture,
+  link,
   verified = false,
   twitterHandle,
   className = 'episode-wrapper',
@@ -83,7 +86,7 @@ export const Episode = ({
         <Flex direction="row">
           {!isSelectedView && (
             <Flex align="center" pr={16}>
-              <Avatar src={imageUrl} type={type || ''} />
+              <Avatar size={64} src={imageUrl} type={type || ''} />
             </Flex>
           )}
 
@@ -92,6 +95,11 @@ export const Episode = ({
               <Flex align="center" direction="row">
                 {type && <TypeBadge type={type} />}
               </Flex>
+              {type === 'youtube' ? (
+                <StyledLink href={`${link}?open=system`} onClick={(e) => e.stopPropagation()}>
+                  <LinkIcon />
+                </StyledLink>
+              ) : null}
             </Flex>
 
             <Description data-testid="episode-description">{episodeTitle}</Description>
@@ -174,3 +182,9 @@ export const Title = styled(Date)`
     background: ${colors.GRAY6};
   }
 `
+
+const StyledLink = styled.a`
+  color: ${colors.GRAY6};
+  font-size: 16px;
+  height: 16px;
+`
diff --git a/src/components/App/SideBar/Relevance/index.tsx b/src/components/App/SideBar/Relevance/index.tsx
index 53d3b4442..cff89c2f5 100644
--- a/src/components/App/SideBar/Relevance/index.tsx
+++ b/src/components/App/SideBar/Relevance/index.tsx
@@ -66,6 +66,7 @@ export const Relevance = ({ isSearchResult }: Props) => {
             show_title: showTitle,
             node_type: nodeType,
             text,
+            link,
             name,
             profile_picture: profilePicture,
             verified = false,
@@ -81,13 +82,14 @@ export const Relevance = ({ isSearchResult }: Props) => {
               episodeTitle={formatDescription(episodeTitle)}
               id={id}
               imageUrl={imageUrl || ''}
+              link={link}
               name={name || ''}
               onClick={() => handleNodeClick(n)}
               profilePicture={profilePicture}
               showTitle={formatDescription(showTitle)}
               text={text || ''}
               twitterHandle={twitterHandle}
-              type={type || nodeType}
+              type={nodeType || type}
               verified={verified}
             />
           )
diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx
index 14df0cda8..67761e1e3 100644
--- a/src/components/App/SideBar/YouTube/index.tsx
+++ b/src/components/App/SideBar/YouTube/index.tsx
@@ -23,6 +23,7 @@ export const YouTube = () => {
     image_url: imageUrl,
     date,
     boost,
+    node_type: nodeType,
     type,
     id,
     show_title: showTitle,
@@ -61,9 +62,10 @@ export const YouTube = () => {
         id={id}
         imageUrl={imageUrl || 'video_default.svg'}
         isSelectedView
+        link={link}
         onClick={() => null}
         showTitle={showTitle}
-        type={type}
+        type={nodeType || type}
       />
       <StyledDivider />
       <div ref={scrollTargetRef} style={{ overflow: 'auto', flex: 1, width: '100%' }}>
diff --git a/src/components/Icons/LinkIcon.tsx b/src/components/Icons/LinkIcon.tsx
new file mode 100644
index 000000000..b07bfb7d2
--- /dev/null
+++ b/src/components/Icons/LinkIcon.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable */
+import React from 'react'
+
+const LinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <g id="Icons 20x20">
+      <path
+        id="Union"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.5661 2.056C17.7371 2.12703 17.873 2.26296 17.9441 2.434C17.9799 2.51816 17.999 2.60853 18.0001 2.7V6.9C18.0001 7.08565 17.9263 7.2637 17.795 7.39497C17.6638 7.52625 17.4857 7.6 17.3001 7.6C17.1144 7.6 16.9364 7.52625 16.8051 7.39497C16.6738 7.2637 16.6001 7.08565 16.6001 6.9V4.387L10.0971 10.897C10.032 10.9626 9.95456 11.0147 9.86926 11.0502C9.78396 11.0858 9.69246 11.1041 9.60006 11.1041C9.50765 11.1041 9.41615 11.0858 9.33085 11.0502C9.24555 11.0147 9.16813 10.9626 9.10306 10.897C9.03745 10.8319 8.98537 10.7545 8.94983 10.6692C8.91429 10.5839 8.896 10.4924 8.896 10.4C8.896 10.3076 8.91429 10.2161 8.94983 10.1308C8.98537 10.0455 9.03745 9.96807 9.10306 9.903L15.6131 3.4H13.1001C12.9144 3.4 12.7364 3.32625 12.6051 3.19497C12.4738 3.0637 12.4001 2.88565 12.4001 2.7C12.4001 2.51435 12.4738 2.3363 12.6051 2.20503C12.7364 2.07375 12.9144 2 13.1001 2H17.3001C17.3915 2.00111 17.4819 2.02013 17.5661 2.056ZM14.705 9.20463C14.8363 9.07336 15.0143 8.99961 15.2 8.99961C15.3857 8.99961 15.5637 9.07336 15.695 9.20463C15.8263 9.33591 15.9 9.51396 15.9 9.69961V13.8996C15.9 14.4566 15.6788 14.9907 15.2849 15.3845C14.8911 15.7784 14.357 15.9996 13.8 15.9996H6.1C5.54305 15.9996 5.0089 15.7784 4.61508 15.3845C4.22125 14.9907 4 14.4566 4 13.8996V6.19961C4 5.64265 4.22125 5.10851 4.61508 4.71469C5.0089 4.32086 5.54305 4.09961 6.1 4.09961H10.3C10.4857 4.09961 10.6637 4.17336 10.795 4.30463C10.9263 4.43591 11 4.61396 11 4.79961C11 4.98526 10.9263 5.16331 10.795 5.29458C10.6637 5.42586 10.4857 5.49961 10.3 5.49961H6.1C5.91435 5.49961 5.7363 5.57336 5.60503 5.70463C5.47375 5.83591 5.4 6.01396 5.4 6.19961V13.8996C5.4 14.0853 5.47375 14.2633 5.60503 14.3946C5.7363 14.5259 5.91435 14.5996 6.1 14.5996H13.8C13.9857 14.5996 14.1637 14.5259 14.295 14.3946C14.4263 14.2633 14.5 14.0853 14.5 13.8996V9.69961C14.5 9.51396 14.5737 9.33591 14.705 9.20463Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+)
+
+export default LinkIcon