feat: add external link for youtube episodes

stakwork · Oct 31, 2023 · 2741127 · 2741127
1 parent 00619dc
commit 2741127
Show file tree

Hide file tree

Showing 39 changed files with 614 additions and 167 deletions.
diff --git a/public/svg-icons/LinkIcon.svg b/public/svg-icons/LinkIcon.svg
diff --git 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>
+              )}
             </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
@@ -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
@@ -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/AddContentIcon.tsx b/src/components/Icons/AddContentIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_25" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_25"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_25)">
@@ -13,6 +26,6 @@ const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default AddContentIcon
+export default AddContentIcon;
diff --git a/src/components/Icons/AddLinkIcon.tsx b/src/components/Icons/AddLinkIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddLinkIcon: 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">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="add_link">
-      <mask id="mask0_2659_52" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_2659_52"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_2659_52)">
@@ -16,6 +29,6 @@ const AddLinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default AddLinkIcon
+export default AddLinkIcon;
diff --git a/src/components/Icons/AddSourceIcon.tsx b/src/components/Icons/AddSourceIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_27" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_27"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_27)">
@@ -13,6 +26,6 @@ const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default AddSourceIcon
+export default AddSourceIcon;
diff --git a/src/components/Icons/AudioIcon.tsx b/src/components/Icons/AudioIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AudioIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Audio">
-      <mask id="mask0_1506_147" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <mask
+        id="mask0_1506_147"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_147)">
@@ -16,6 +29,6 @@ const AudioIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default AudioIcon
+export default AudioIcon;
diff --git a/src/components/Icons/BoostIcon.tsx b/src/components/Icons/BoostIcon.tsx
@@ -1,8 +1,14 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const BoostIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 9 9" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 9 9"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       id="Icon"
       fill-rule="evenodd"
@@ -11,6 +17,6 @@ const BoostIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default BoostIcon
+export default BoostIcon;
diff --git a/src/components/Icons/BrowseGalleryIcon.tsx b/src/components/Icons/BrowseGalleryIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const BrowseGalleryIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="browse_gallery">
-      <mask id="mask0_1360_27257" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+      <mask
+        id="mask0_1360_27257"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1360_27257)">
@@ -16,6 +29,6 @@ const BrowseGalleryIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default BrowseGalleryIcon
+export default BrowseGalleryIcon;
diff --git a/src/components/Icons/BubbleChartIcon.tsx b/src/components/Icons/BubbleChartIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const BubbleChartIcon: 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">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="bubble_chart">
-      <mask id="mask0_1551_42" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_1551_42"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1551_42)">
@@ -16,6 +29,6 @@ const BubbleChartIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default BubbleChartIcon
+export default BubbleChartIcon;
diff --git a/src/components/Icons/BudgetIcon.tsx b/src/components/Icons/BudgetIcon.tsx
@@ -1,13 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const BudgetIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 22 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 22 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M14 16C11.7667 16 9.875 15.225 8.325 13.675C6.775 12.125 6 10.2333 6 8C6 5.76667 6.775 3.875 8.325 2.325C9.875 0.775 11.7667 0 14 0C16.2333 0 18.125 0.775 19.675 2.325C21.225 3.875 22 5.76667 22 8C22 10.2333 21.225 12.125 19.675 13.675C18.125 15.225 16.2333 16 14 16ZM4.625 15.25C3.225 14.6 2.10433 13.625 1.263 12.325C0.421 11.025 0 9.58333 0 8C0 6.41667 0.421 4.975 1.263 3.675C2.10433 2.375 3.225 1.4 4.625 0.75C4.975 0.583333 5.29167 0.595667 5.575 0.787C5.85833 0.979 6 1.29167 6 1.725C6 1.89167 5.946 2.054 5.838 2.212C5.72933 2.37067 5.59167 2.49167 5.425 2.575C4.375 3.05833 3.54167 3.78733 2.925 4.762C2.30833 5.73733 2 6.81667 2 8C2 9.18333 2.30833 10.2623 2.925 11.237C3.54167 12.2123 4.375 12.9417 5.425 13.425C5.59167 13.5083 5.72933 13.625 5.838 13.775C5.946 13.925 6 14.0917 6 14.275C6 14.6917 5.85833 15 5.575 15.2C5.29167 15.4 4.975 15.4167 4.625 15.25ZM14 14C15.6667 14 17.0833 13.4167 18.25 12.25C19.4167 11.0833 20 9.66667 20 8C20 6.33333 19.4167 4.91667 18.25 3.75C17.0833 2.58333 15.6667 2 14 2C12.3333 2 10.9167 2.58333 9.75 3.75C8.58333 4.91667 8 6.33333 8 8C8 9.66667 8.58333 11.0833 9.75 12.25C10.9167 13.4167 12.3333 14 14 14Z"
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default BudgetIcon
+export default BudgetIcon;