Add the YouTube banner information

Seneca-CDOT · Mar 25, 2022 · 43ca572 · 43ca572
1 parent 2ee4404
commit 43ca572
Show file tree

Hide file tree

Showing 13 changed files with 180 additions and 20 deletions.
diff --git a/src/web/app/src/components/GenericInfoProvider.tsx b/src/web/app/src/components/GenericInfoProvider.tsx
@@ -1,9 +1,11 @@
 import { createContext, useMemo, ReactNode } from 'react';
 import { Post } from '../interfaces';
 import { GitHubInfoContextInterface, extractGitHubInfo } from './GitHubInfo';
+import { YouTubeInfoContextInterface, extractYouTubeInfo } from './YouTubeInfo';
 
 type GenericInfoContextInterface = {
   gitHubInfo: GitHubInfoContextInterface;
+  youTubeInfo: YouTubeInfoContextInterface;
 };
 
 const GenericInfoContext = createContext<GenericInfoContextInterface>({
@@ -14,6 +16,11 @@ const GenericInfoContext = createContext<GenericInfoContextInterface>({
     commits: [],
     users: [],
   },
+  youTubeInfo: {
+    channelUrl: '',
+    subscriberCount: -1,
+    viewCount: -1,
+  },
 });
 
 type Props = {
@@ -25,6 +32,7 @@ const GenericInfoProvider = ({ children, post }: Props) => {
   const genericInfo = useMemo(() => {
     return {
       gitHubInfo: extractGitHubInfo(post),
+      youTubeInfo: extractYouTubeInfo(post),
     };
   }, [post]);
 

diff --git a/src/web/app/src/components/Posts/GitHubInfo/Commits.tsx b/src/web/app/src/components/Posts/GitHubInfo/Commits.tsx
@@ -1,6 +1,6 @@
 import { VscGitCommit } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import useGithubInfo from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '../../../hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/src/web/app/src/components/Posts/GitHubInfo/GitHubInfoMobile.tsx b/src/web/app/src/components/Posts/GitHubInfo/GitHubInfoMobile.tsx
@@ -4,7 +4,7 @@ import Issues from './Issues';
 import PullRequests from './PullRequests';
 import Commits from './Commits';
 import Users from './Users';
-import useGithubInfo from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '../../../hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/src/web/app/src/components/Posts/GitHubInfo/Issues.tsx b/src/web/app/src/components/Posts/GitHubInfo/Issues.tsx
@@ -1,6 +1,6 @@
 import { VscIssues } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import useGithubInfo from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '../../../hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/src/web/app/src/components/Posts/GitHubInfo/PullRequests.tsx b/src/web/app/src/components/Posts/GitHubInfo/PullRequests.tsx
@@ -1,6 +1,6 @@
 import { VscGitPullRequest } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import useGithubInfo from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '../../../hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/src/web/app/src/components/Posts/GitHubInfo/Repos.tsx b/src/web/app/src/components/Posts/GitHubInfo/Repos.tsx
@@ -1,6 +1,6 @@
 import { VscRepoForked } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import useGithubInfo from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '../../../hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/src/web/app/src/components/Posts/GitHubInfo/Users.tsx b/src/web/app/src/components/Posts/GitHubInfo/Users.tsx
@@ -1,7 +1,7 @@
 import { VscGithub } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import TelescopeAvatar from '../../TelescopeAvatar';
-import useGithubInfo from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '../../../hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/src/web/app/src/components/Posts/GitHubInfo/index.tsx b/src/web/app/src/components/Posts/GitHubInfo/index.tsx
@@ -4,7 +4,7 @@ import Issues from './Issues';
 import PullRequests from './PullRequests';
 import Commits from './Commits';
 import Users from './Users';
-import useGithubInfo from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '../../../hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/src/web/app/src/components/Posts/Post.tsx b/src/web/app/src/components/Posts/Post.tsx
@@ -17,7 +17,9 @@ import {
 import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
 import GitHubInfo from './GitHubInfo';
+import YouTubeInfo from './YouTubeInfo';
 import GitHubInfoMobile from './GitHubInfo/GitHubInfoMobile';
+import YouTubeInfoMobile from './YouTubeInfo/YouTubeInfoMobile';
 import GenericInfoProvider from '../GenericInfoProvider';
 import PostDesktopInfo from './PostInfo';
 import PostAvatar from './PostAvatar';
@@ -248,6 +250,9 @@ const useStyles = makeStyles((theme: Theme) =>
       zIndex: 1,
       position: 'sticky',
     },
+    accordionDetails: {
+      justifyContent: 'space-between',
+    },
     expandIcon: {
       alignSelf: 'center',
       borderLeft: '1px solid #cccccc',
@@ -446,6 +451,7 @@ const PostComponent = ({ postUrl, currentPost, totalPosts }: Props) => {
                 blogUrl={post.feed.link}
               />
               <GitHubInfo />
+              <YouTubeInfo />
             </ListSubheader>
           </>
         ) : (
@@ -497,8 +503,9 @@ const PostComponent = ({ postUrl, currentPost, totalPosts }: Props) => {
                 </div>
               </ListSubheader>
             </AccordionSummary>
-            <AccordionDetails>
+            <AccordionDetails className={classes.accordionDetails}>
               <GitHubInfoMobile />
+              <YouTubeInfoMobile />
             </AccordionDetails>
             <ExpandIcon
               small={false}
@@ -508,15 +515,6 @@ const PostComponent = ({ postUrl, currentPost, totalPosts }: Props) => {
           </Accordion>
         )}
 
-        <div className={classes.content}>
-          {isMedia && (
-            <LiteYouTubeEmbed
-              id={extractVideoId(post)}
-              title={post.title}
-              wrapperClass={`yt-lite ${classes.video}`}
-            />
-          )}
-        </div>
         <div className={classes.content}>
           {isMedia && (
             <LiteYouTubeEmbed

diff --git a/src/web/app/src/components/Posts/YouTubeInfo/YouTubeInfoMobile.tsx b/src/web/app/src/components/Posts/YouTubeInfo/YouTubeInfoMobile.tsx
@@ -0,0 +1,64 @@
+import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/core';
+import { AiOutlineYoutube } from 'react-icons/ai';
+import { useYouTubeInfo } from '../../../hooks/use-genericInfo';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      padding: '0',
+      display: 'flex',
+      flexDirection: 'column',
+      [theme.breakpoints.up('lg')]: {
+        width: '21rem',
+      },
+      color: theme.palette.text.secondary,
+      lineHeight: 'normal',
+    },
+    link: {
+      textDecoration: 'none',
+      color: 'inherit',
+      '&:hover': {
+        textDecorationLine: 'none',
+      },
+    },
+    icon: {
+      fontSize: '2rem',
+      marginRight: '1rem',
+      verticalAlign: 'text-bottom',
+    },
+    YouTubeInfoContainer: {
+      margin: '0 0 0 1rem',
+      fontSize: '1.2rem',
+    },
+    YouTubeTitleSection: {
+      fontSize: '1.4rem',
+      margin: 0,
+      paddingTop: '1rem',
+      lineHeight: 'normal',
+    },
+  })
+);
+
+const YouTubeInfoMobile = () => {
+  const classes = useStyles();
+
+  const { channelUrl, subscriberCount, viewCount } = useYouTubeInfo();
+
+  return (
+    <ListSubheader component="div" className={classes.root}>
+      {!!channelUrl && (
+        <div className={classes.YouTubeInfoContainer}>
+          <h2 className={classes.YouTubeTitleSection}>
+            <a href={channelUrl} className={classes.link}>
+              <AiOutlineYoutube className={classes.icon} /> Channel
+            </a>
+          </h2>
+          <p>{subscriberCount} subscribers</p>
+          <p>{viewCount} views</p>
+        </div>
+      )}
+    </ListSubheader>
+  );
+};
+
+export default YouTubeInfoMobile;
diff --git a/src/web/app/src/components/Posts/YouTubeInfo/index.tsx b/src/web/app/src/components/Posts/YouTubeInfo/index.tsx
@@ -0,0 +1,65 @@
+import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/core';
+import { AiOutlineYoutube } from 'react-icons/ai';
+import { useYouTubeInfo } from '../../../hooks/use-genericInfo';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      padding: '0',
+      display: 'flex',
+      borderLeft: '1.5px solid #999999',
+      flexDirection: 'column',
+      [theme.breakpoints.up('lg')]: {
+        width: '21rem',
+      },
+      color: theme.palette.text.secondary,
+      lineHeight: 'normal',
+    },
+    link: {
+      textDecoration: 'none',
+      color: 'inherit',
+      '&:hover': {
+        textDecorationLine: 'none',
+      },
+    },
+    icon: {
+      fontSize: '2rem',
+      marginRight: '1rem',
+      verticalAlign: 'text-bottom',
+    },
+    YouTubeInfoContainer: {
+      margin: '2rem 0 0 1rem',
+      fontSize: '1.2rem',
+    },
+    YouTubeTitleSection: {
+      fontSize: '1.4rem',
+      margin: 0,
+      paddingTop: '1rem',
+      lineHeight: 'normal',
+    },
+  })
+);
+
+const YouTubeInfo = () => {
+  const classes = useStyles();
+
+  const { channelUrl, subscriberCount, viewCount } = useYouTubeInfo();
+
+  return (
+    <ListSubheader component="div" className={classes.root}>
+      {!!channelUrl && (
+        <div className={classes.YouTubeInfoContainer}>
+          <h2 className={classes.YouTubeTitleSection}>
+            <a href={channelUrl} className={classes.link}>
+              <AiOutlineYoutube className={classes.icon} /> Channel
+            </a>
+          </h2>
+          <p>{subscriberCount} subscribers</p>
+          <p>{viewCount} views</p>
+        </div>
+      )}
+    </ListSubheader>
+  );
+};
+
+export default YouTubeInfo;
diff --git a/src/web/app/src/components/YouTubeInfo.tsx b/src/web/app/src/components/YouTubeInfo.tsx
@@ -0,0 +1,23 @@
+import { Post } from '../interfaces';
+
+export interface YouTubeInfoContextInterface {
+  channelUrl: string;
+  subscriberCount: number;
+  viewCount: number;
+}
+
+export const extractYouTubeInfo = (post: Post): YouTubeInfoContextInterface => {
+  const youTubeInfo = {
+    channelUrl: '',
+    subscriberCount: -1,
+    viewCount: -1,
+  };
+
+  if (post.type !== 'video') {
+    return youTubeInfo;
+  }
+
+  youTubeInfo.channelUrl = post.feed.link;
+
+  return youTubeInfo;
+};
diff --git a/src/web/app/src/hooks/use-genericInfo.ts b/src/web/app/src/hooks/use-genericInfo.ts
@@ -1,7 +1,9 @@
 import { useContext } from 'react';
 import { GitHubInfoContextInterface } from '../components/GitHubInfo';
+import { YouTubeInfoContextInterface } from '../components/YouTubeInfo';
 import { GenericInfoContext } from '../components/GenericInfoProvider';
 
-const useGithubInfo = (): GitHubInfoContextInterface => useContext(GenericInfoContext).gitHubInfo;
-
-export default useGithubInfo;
+export const useGithubInfo = (): GitHubInfoContextInterface =>
+  useContext(GenericInfoContext).gitHubInfo;
+export const useYouTubeInfo = (): YouTubeInfoContextInterface =>
+  useContext(GenericInfoContext).youTubeInfo;