search feed and channel changes

rishikesh08 · Aug 6, 2022 · c214573 · c214573
1 parent 67be083
commit c214573
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 58 deletions.
diff --git a/src/components/ChannelDetail.jsx b/src/components/ChannelDetail.jsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Box } from '@mui/material';
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { Box } from "@mui/material";
 
-import { Videos, ChannelCard, Loader } from './';
-import { axiosGetReq } from '../utils';
+import { Videos, ChannelCard, Loader } from "./";
+import { axiosGetReq } from "../utils";
 
 const ChannelDetail = () => {
   const [channelDetail, setChannelDetail] = useState();
@@ -16,7 +16,9 @@ const ChannelDetail = () => {
       const data = await axiosGetReq(`channels?part=snippet&id=${id}`);
       setChannelDetail(data?.items[0]);
 
-      const videosData = await axiosGetReq(`search?channelId=${id}&part=snippet%2Cid&order=date`);
+      const videosData = await axiosGetReq(
+        `search?channelId=${id}&part=snippet%2Cid&order=date`
+      );
       setVideos(videosData?.items);
     };
 
@@ -26,21 +28,24 @@ const ChannelDetail = () => {
   if (!videos) <Loader />;
 
   return (
-    <>
+    <Box minHeight="95vh">
       <Box>
         <img
           src={channelDetail?.brandingSettings?.image?.bannerExternalUrl}
-          alt='channel-art'
+          alt="channel-art"
           style={{
-            height: '300px',
-            width: '100%',
-            borderRadius: '8px',
+            height: "300px",
+            width: "100%",
+            borderRadius: "8px",
+            objectFit: "cover",
           }}
         />
-        <ChannelCard channelDetail={channelDetail} mt='-93px' />
+        <ChannelCard channelDetail={channelDetail} mt="-93px" />
       </Box>
-      <Videos videos={videos} />
-    </>
+      <Box p={2}>
+        <Videos videos={videos} />
+      </Box>
+    </Box>
   );
 };
 

diff --git a/src/components/SearchFeed.jsx b/src/components/SearchFeed.jsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { Typography } from '@mui/material';
-import { useParams } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { Typography, Box } from "@mui/material";
+import { useParams } from "react-router-dom";
 
-import { Videos } from './';
-import { axiosGetReq } from '../utils';
+import { Videos } from "./";
+import { axiosGetReq } from "../utils";
 
 const SearchFeed = () => {
   const [videos, setVideos] = useState(null);
@@ -16,21 +16,22 @@ const SearchFeed = () => {
     };
 
     fetchVideos();
-  }, []);
+  }, [searchTerm]);
 
   return (
-    <>
+    <Box p={2} minHeight="95vh">
       <Typography
         fontSize={25}
         fontWeight={900}
-        p={3}
-        textAlign='center'
-        color='white'
+        textAlign="left"
+        color="white"
+        mb={2}
       >
-        Search Results for {searchTerm} Videos
+        Search Results for
+        <span style={{ color: "#FC1503" }}> {searchTerm} </span> Videos
       </Typography>
       <Videos videos={videos} />
-    </>
+    </Box>
   );
 };
 

diff --git a/src/components/VideoDetail.jsx b/src/components/VideoDetail.jsx
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
-import ReactPlayer from 'react-player';
-import { Typography, Box, Stack } from '@mui/material';
-import ThumbUpAltOutlinedIcon from '@mui/icons-material/ThumbUpAltOutlined';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import React, { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import ReactPlayer from "react-player";
+import { Typography, Box, Stack } from "@mui/material";
+import ThumbUpAltOutlinedIcon from "@mui/icons-material/ThumbUpAltOutlined";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 
-import { Videos, Loader } from './';
-import { axiosGetReq } from '../utils';
+import { Videos, Loader } from "./";
+import { axiosGetReq } from "../utils";
 
 const VideoDetail = () => {
   const [videoDetail, setVideoDetail] = useState(null);
@@ -31,71 +31,76 @@ const VideoDetail = () => {
   if (!videos) <Loader />;
 
   return (
-    <>
+    <Box minHeight="95vh">
       {videoDetail && (
-        <Stack direction={{ xs: 'column', md: 'row' }}>
+        <Stack direction={{ xs: "column", md: "row" }}>
           <Box flex={1}>
-            <Box sx={{ width: '100%', position: 'sticky', top: '100px' }}>
+            <Box sx={{ width: "100%", position: "sticky", top: "86px" }}>
               <ReactPlayer
-                className='react-player'
+                className="react-player"
                 controls
                 url={`https://www.youtube.com/watch?v=${id}`}
               />
-              <Typography color='#fff' fontSize={18} fontWeight={500} p={1.5}>
+              <Typography color="#fff" fontSize={18} fontWeight={500} p={1.5}>
                 {videoDetail?.snippet?.title}
               </Typography>
               <Stack
-                direction='row'
-                justifyContent='space-between'
-                gap='40px'
-                sx={{ color: '#fff' }}
+                direction="row"
+                justifyContent="space-between"
+                sx={{ color: "#fff" }}
+                py={1}
+                px={2}
               >
                 <Link to={`/channel/${videoDetail?.snippet?.channelId}`}>
                   <Typography
                     fontSize={{ md: 20, xs: 16 }}
                     fontWeight={600}
-                    mx={{ md: 2, xs: 0 }}
-                    color='#fff'
+                    color="#fff"
                   >
                     {videoDetail?.snippet?.channelTitle}
                     <CheckCircleIcon
-                      sx={{ fontSize: '12px', color: 'gray', ml: '5px' }}
+                      sx={{ fontSize: "12px", color: "gray", ml: "5px" }}
                     />
                   </Typography>
                 </Link>
-                <Stack direction='row' gap='20px' alignItems='center'>
+                <Stack direction="row" gap="20px" alignItems="center">
                   <Typography
-                    sx={{ opacity: 0.7, fontSize: { md: '16px', xs: '14px' } }}
+                    sx={{ opacity: 0.7, fontSize: { md: "16px", xs: "14px" } }}
                   >
                     {parseInt(
                       videoDetail?.statistics?.viewCount
-                    ).toLocaleString('en-US')}{' '}
+                    ).toLocaleString("en-US")}{" "}
                     views
                   </Typography>
 
                   <Stack
-                    direction='row'
-                    alignItems='center'
-                    gap='10px'
-                    sx={{ opacity: 0.7, fontSize: { md: '16px', xs: '14px' } }}
+                    direction="row"
+                    alignItems="center"
+                    gap="10px"
+                    sx={{ opacity: 0.7, fontSize: { md: "16px", xs: "14px" } }}
                   >
                     <ThumbUpAltOutlinedIcon />
                     <span>
                       {parseInt(
                         videoDetail?.statistics?.likeCount
-                      ).toLocaleString('en-US')}
+                      ).toLocaleString("en-US")}
                     </span>
                   </Stack>
                 </Stack>
               </Stack>
             </Box>
           </Box>
-          <Box px={1} py={{ md: 1, xs: 5 }}>
-            <Videos videos={videos} direction='column' />
+          <Box
+            px={2}
+            py={{ md: 1, xs: 5 }}
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Videos videos={videos} direction="column" />
           </Box>
         </Stack>
       )}
-    </>
+    </Box>
   );
 };
 

diff --git a/src/components/Videos.jsx b/src/components/Videos.jsx
@@ -27,7 +27,7 @@ const Videos = ({ videos, direction }) => (
           {item.id.videoId && (
             <Card
               sx={{
-                width: { md: "320px", xs: "350px" },
+                width: { md: "320px", xs: "100%" },
                 boxShadow: "none",
                 borderRadius: 0,
               }}