feat: add external link for youtube episodes (#534)

* feat: add external link for youtube episodes

* fix: prettier fix

* fix: using null insted of && operator

---------

Co-authored-by: Расул <[email protected]>
Co-authored-by: kevkevinpal <[email protected]>

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;
+`

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}
             />
           )

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%' }}>

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