Spaces:

privateone
/

tubeone

Paused

App Files Files Community

Bhabananda Das commited on Jul 18, 2024

Commit

bd903ab

1 Parent(s): 3efcb14

fff

Browse files

Files changed (36) hide show

.gitignore +24 -0
Dockerfile +13 -0
LICENSE +21 -0
package-lock.json +0 -0
package.json +60 -0
public/favicon.ico +0 -0
public/index.html +46 -0
public/logo256.png +0 -0
public/logo32.png +0 -0
public/logo512.png +0 -0
public/logo72.png +0 -0
public/manifest.json +42 -0
public/robots.txt +3 -0
src/App.css +53 -0
src/App.js +24 -0
src/components/cards/HomeVideoCard.jsx +85 -0
src/components/cards/RelatedVideoCard.jsx +65 -0
src/components/cards/SearchVideoCard.jsx +93 -0
src/components/constants/Constants.jsx +62 -0
src/components/layout/Header.jsx +244 -0
src/components/layout/HomeSkeleton.jsx +47 -0
src/components/layout/Layout.jsx +38 -0
src/components/layout/MobileSearch.jsx +107 -0
src/components/layout/MobileSidebar.jsx +12 -0
src/components/layout/SearchBox.jsx +168 -0
src/components/layout/SearchSkeleton.jsx +70 -0
src/components/layout/Sidebar.jsx +42 -0
src/components/list/RelatedList.jsx +131 -0
src/components/list/SearchList.jsx +103 -0
src/components/list/TrendingList.jsx +252 -0
src/context/YoutubeContext.js +128 -0
src/index.css +13 -0
src/index.js +21 -0
src/pages/home/Home.jsx +34 -0
src/pages/video/Video.jsx +382 -0
src/utils/utils.js +28 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+# testing
+/coverage
+# production
+/build
+# misc
+.env
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Dockerfile ADDED Viewed

	@@ -0,0 +1,13 @@

+FROM node:18-alpine
+RUN apt-get update -y && apt-get upgrade -y \
+ 	&& apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+COPY . /wd
+RUN chmod 777 /wd
+WORKDIR /wd
+RUN npm install
+CMD ["npm", "start"]

LICENSE ADDED Viewed

	@@ -0,0 +1,21 @@

+MIT License
+Copyright (c) 2023 Shivraj
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,60 @@

+{
+  "name": "tubeone",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@chakra-ui/react": "^2.8.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
+    "date-fns": "^2.30.0",
+    "framer-motion": "^10.18.0",
+    "lodash": "^4.17.21",
+    "numeral": "^2.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
+    "react-icons": "^4.12.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-player": "^2.16.0",
+    "react-router-dom": "^6.25.1",
+    "react-scripts": "5.0.1",
+    "react-youtube": "^10.1.0",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "PORT=7860 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint \"src/**/*.{js,jsx}\"",
+    "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "eslint": "^8.46.0",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.1"
+  }
+}

public/favicon.ico ADDED Viewed

public/index.html ADDED Viewed

	@@ -0,0 +1,46 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="React Youtube clone using YouTube api" />
+    <meta
+      name="keywords"
+      content="YouTube Clone, YouTube Clone React, YouTube Clone Reactjs, YouTube Clone using YouTube Api, YouTube Clone using Google Api, YouTube Clone using Rapid Api, YouTube Clone using YouTube v3 Api, Online Videos, YouTube Alternative, All Coutries Trending Videos"
+    />
+    <meta name="author" content="Shivraj Gurjar" />
+    <!-- Open Graph Meta Tags (for social media sharing) -->
+    <meta property="og:title" content="YouTube Clone" />
+    <meta
+      property="og:description"
+      content="React Youtube clone using YouTube api"
+    />
+    <meta property="og:image" content="path/to/your-thumbnail-image.jpg" />
+    <meta
+      property="og:url"
+      content="https://youtube-clone-shivraj.vercel.app"
+    />
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="YouTube Clone" />
+    <meta
+      name="twitter:description"
+      content="React Youtube clone using YouTube api"
+    />
+    <meta name="twitter:image" content="path/to/your-thumbnail-image.jpg" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>YouTube Clone</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/logo256.png ADDED Viewed

public/logo32.png ADDED Viewed

public/logo512.png ADDED Viewed

public/logo72.png ADDED Viewed

public/manifest.json ADDED Viewed

	@@ -0,0 +1,42 @@

+{
+  "short_name": "Youtube Clone",
+  "name": "Youtube clone by Shiv",
+  "description":"This is React YouTube Clone Where you can stream trending videos of different countries with infinite scrolling, you can search videos and you can choose any section in to sidebar which you want",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "512x512",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo32.png",
+      "type": "image/png",
+      "sizes": "32x32"
+    },
+    {
+      "src": "logo72.png",
+      "type": "image/png",
+      "sizes": "72x72"
+    },
+    {
+      "src": "logo256.png",
+      "type": "image/png",
+      "sizes": "256x256"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "background_color": "#0f0f0f",
+  "theme_color": "black",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "categories": ["Entertainment", "Video"],
+  "prefer_related_applications": false,
+  "dir": "ltr",
+  "lang": "en-US"
+}

public/robots.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.css ADDED Viewed

	@@ -0,0 +1,53 @@

+div {
+  /* color: #0000006d; */
+}
+/* Customize the scrollbar track */
+::-webkit-scrollbar {
+  width: 8px; /* Width of the scrollbar */
+}
+/* Customize the scrollbar thumb */
+::-webkit-scrollbar-thumb {
+  background: #959595; /* Color of the scrollbar thumb */
+  border-radius: 5px; /* Rounded corners for the thumb */
+  margin: 2px 4px;
+}
+/* Change the color when hovering over the scrollbar thumb */
+::-webkit-scrollbar-thumb:hover {
+  background: #717171;
+}
+::-webkit-scrollbar-track {
+  background: #0f0f0f; /* Change this color to the desired color */
+}
+.youtube-video {
+  width: 860px;
+  height: 485px;
+}
+/* Hide scrollbar on mobile screens */
+@media (max-width: 767px) {
+  .youtube-video {
+    width: 100%;
+    height: 300px;
+  }
+  .hidden-scrollbar {
+    overflow-x: auto;
+    /* hide scrollbar for IE, Edge and Firefox */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  /* hide scrollbar for chrome, safari and opera */
+  .hidden-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  ::-webkit-scrollbar {
+    width: 0px; /* Width of the scrollbar */
+  }
+}

src/App.js ADDED Viewed

	@@ -0,0 +1,24 @@

+import React, { Fragment } from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Video from "./pages/video/Video";
+import Home from "./pages/home/Home";
+import "./App.css";
+import MobileSearch from "./components/layout/MobileSearch";
+function App() {
+  return (
+    <Fragment>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<Home />} />
+          <Route path='/video/:videoId/:channelId' element={<Video />} />
+          <Route path='/search/mobile' element={<MobileSearch />} />
+        </Routes>
+      </BrowserRouter>
+    </Fragment>
+  );
+}
+export default App;

src/components/cards/HomeVideoCard.jsx ADDED Viewed

	@@ -0,0 +1,85 @@

+import React from "react";
+import { Avatar, Box, Flex, Image, Text } from "@chakra-ui/react";
+import { NavLink } from "react-router-dom";
+const HomeVideoCard = ({
+  videoId,
+  thumbnail,
+  title,
+  postTime,
+  views,
+  duration,
+  avatar,
+  channelName,
+  channelId,
+}) => (
+  <>
+    <NavLink to={`/video/${videoId}/${channelId}`}>
+      <Box>
+        <Box
+          borderRadius={{ base: "0px", sm: "0px", md: "8px" }}
+          position={"relative"}
+          backgroundRepeat={"no-repeat"}
+          height={{ base: "210px", sm: "270px", md: "200px" }}
+          backgroundImage={thumbnail}
+          backgroundSize={"cover"}
+          backgroundColor="#2e2c2c"
+          backgroundPosition={"center"}
+        >
+          <Text
+            position={"absolute"}
+            right={3}
+            bottom={3}
+            color={"white"}
+            background={"black"}
+            fontSize={"xs"}
+            padding={"3px 8px"}
+            borderRadius={"5px"}
+          >
+            {duration || "0:06:23"}
+          </Text>
+        </Box>
+        <Flex padding={{ base: "10px", sm: "10px", md: "10px 0 0 0" }} gap={3}>
+          {avatar ? (
+            <Image
+              height={"35px"}
+              borderRadius={"100%"}
+              src={avatar}
+              alt="channel"
+            />
+          ) : (
+            <Avatar
+              size={"sm"}
+              name={channelName}
+              src="https://bit.ly/tioluwani-kolawole"
+            />
+          )}
+          <Box color={"white"}>
+            <Text fontWeight={"semibold"}>{title}</Text>
+            <Box
+              marginTop={"5px"}
+              gap={3}
+              display={{ base: "flex", sm: "flex", md: "block" }}
+            >
+              <Text color={"#b7b5b5"} fontSize={"xs"}>
+                {channelName}
+              </Text>
+              <Flex margintop="5px" gap={2}>
+                <Text color={"#b7b5b5"} fontSize={"xs"}>
+                  {views ? `${views} views` : ""}
+                </Text>
+                <Text color={"#b7b5b5"} fontSize={"xs"}>
+                  {postTime || ""}
+                </Text>
+              </Flex>
+            </Box>
+          </Box>
+        </Flex>
+      </Box>
+    </NavLink>
+  </>
+);
+export default HomeVideoCard;

src/components/cards/RelatedVideoCard.jsx ADDED Viewed

	@@ -0,0 +1,65 @@

+import { Box, Flex, Image, Text } from "@chakra-ui/react";
+import React from "react";
+import { NavLink } from "react-router-dom";
+const RelatedVideoCard = ({
+  videoId,
+  title,
+  thumbnail,
+  duration,
+  views,
+  postTime,
+  channelName,
+  channelId,
+}) => (
+  <>
+    <NavLink to={`/video/${videoId}/${channelId}?category="Trending`}>
+      <Flex alignItems={"center"} width={"100%"} gap={5}>
+        <Box
+          backgroundColor="#2e2c2c"
+          borderRadius={"8px"}
+          position={"relative"}
+          overflow={"hidden"}
+          width={"140px"}
+          height={"70px"}
+        >
+          <Image
+            src={thumbnail}
+            alt="thumbnail"
+            objectFit={"cover"}
+            width={"100%"}
+          />
+          <Text
+            right={3}
+            bottom={3}
+            color={"white"}
+            background={"black"}
+            fontSize={"xs"}
+            padding={"3px 8px"}
+            borderRadius={"5px"}
+            position={"absolute"}
+          >
+            {duration || "0:00"}
+          </Text>
+        </Box>
+        <Box width="70%">
+          <Text fontSize={"16px"} color={"white"}>
+            {title}
+          </Text>
+          <Text color={"#b7b5b5"} fontSize={"xs"}>
+            {views || ""} {postTime || "1 day ago"}
+          </Text>
+          <Flex gap={3} alignItems={"center"}>
+            <Text color={"#b7b5b5"} fontSize={"sm"}>
+              {channelName}
+            </Text>
+          </Flex>
+        </Box>
+      </Flex>
+    </NavLink>
+  </>
+);
+export default RelatedVideoCard;

src/components/cards/SearchVideoCard.jsx ADDED Viewed

	@@ -0,0 +1,93 @@

+import { Avatar, Box, Flex, Image, Text } from "@chakra-ui/react";
+import React from "react";
+import { NavLink } from "react-router-dom";
+const SearchVideoCard = ({
+  videoId,
+  title,
+  thumbnail,
+  duration,
+  views,
+  postTime,
+  avatar,
+  channelName,
+  desc,
+  channelId,
+}) => (
+  <>
+    <NavLink to={`/video/${videoId}/${channelId}?category=${"Trending"}`}>
+      <Flex width={"100%"} gap={5}>
+        <Box
+          backgroundColor="#2e2c2c"
+          borderRadius={"8px"}
+          position={"relative"}
+          overflow={"hidden"}
+          width={"30%"}
+          height={"170px"}
+        >
+          <Image
+            src={thumbnail}
+            width="100%"
+            alt="thumbnail"
+            objectFit={"cover"}
+            height={"100%"}
+          />
+          <Text
+            right={3}
+            bottom={3}
+            color={"white"}
+            background={"black"}
+            fontSize={"xs"}
+            padding={"3px 8px"}
+            borderRadius={"5px"}
+            position={"absolute"}
+          >
+            {duration || "0:00"}
+          </Text>
+        </Box>
+        <Box width="70%">
+          <Text fontSize={"22px"} color={"white"}>
+            {title}
+          </Text>
+          <Flex margintop="5px" gap={2}>
+            <Text color={"#b7b5b5"} fontSize={"sm"}>
+              {views || ""}{" "}
+            </Text>
+            <Text color={"#b7b5b5"} fontSize={"sm"}>
+              |
+            </Text>
+            <Text color={"#b7b5b5"} fontSize={"sm"}>
+              {postTime || "1 day ago"}
+            </Text>
+          </Flex>
+          <Flex marginTop={"10px"} gap={3} alignItems={"center"}>
+            {avatar ? (
+              <Image
+                height={"35px"}
+                borderRadius={"100%"}
+                src={avatar}
+                alt="channel"
+              />
+            ) : (
+              <Avatar
+                size={"sm"}
+                name={channelName}
+                src="https://bit.ly/tioluwani-kolawole"
+              />
+            )}
+            <Text color={"#b7b5b5"} fontSize={"sm"}>
+              {channelName}
+            </Text>
+          </Flex>
+          <Text>{desc || ""}</Text>
+        </Box>
+      </Flex>
+    </NavLink>
+  </>
+);
+export default SearchVideoCard;

src/components/constants/Constants.jsx ADDED Viewed

	@@ -0,0 +1,62 @@

+import React from "react";
+import { AiTwotoneFire } from "react-icons/ai";
+import {
+  MdSportsBaseball,
+  MdSportsEsports,
+  MdOutlineHealthAndSafety,
+  MdScience,
+  MdFastfood,
+} from "react-icons/md";
+import { BiCameraMovie, BiMoviePlay } from "react-icons/bi";
+import { GiBrain } from "react-icons/gi";
+import { FaSpaceAwesome } from "react-icons/fa6";
+import { BsCodeSlash } from "react-icons/bs";
+import { FaUserTie } from "react-icons/fa";
+export const sidebarData = [
+  { name: "Trending", icon: <AiTwotoneFire /> },
+  { name: "Adveture and Movies", icon: <BiMoviePlay /> },
+  { name: "Programming and Coding", icon: <BsCodeSlash /> },
+  { name: "Science and Fact", icon: <MdScience /> },
+  { name: "Technology and Space", icon: <FaSpaceAwesome /> },
+  { name: "Business and Startups", icon: <FaUserTie /> },
+  { name: "Sports and Highlightes", icon: <MdSportsBaseball /> },
+  { name: "Movies and Webseries", icon: <BiCameraMovie /> },
+  { name: "AI and ChatGpt", icon: <GiBrain /> },
+  { name: "Health and Fitness", icon: <MdOutlineHealthAndSafety /> },
+  { name: "Food and Blogging", icon: <MdFastfood /> },
+  { name: "Gaming and Live", icon: <MdSportsEsports /> },
+];
+export const countries = [
+  {
+    name: "India",
+    countryCode: "IN",
+    url: "https://t4.ftcdn.net/jpg/02/81/47/57/240_F_281475718_rlQONmoS2E3CJtv0zFv2HwZ1weGhxpff.jpg",
+  },
+  {
+    name: "America",
+    countryCode: "US",
+    url: "https://t3.ftcdn.net/jpg/02/70/24/98/240_F_270249859_mf1Kyad7MO3Gb1BGvBahbB9SNttnVZO7.jpg",
+  },
+  {
+    name: "Germany",
+    countryCode: "DE",
+    url: "https://t3.ftcdn.net/jpg/04/44/28/64/240_F_444286454_6FR1VrzfVE8AJCwd28ft9T4pxEwH22Ng.jpg",
+  },
+  {
+    name: "Japan",
+    countryCode: "JP",
+    url: "https://t3.ftcdn.net/jpg/01/79/73/80/240_F_179738020_0cdBcea7tUpPoFTCiiVfl6p9chD28tQz.jpg",
+  },
+  {
+    name: "Canada",
+    countryCode: "CA",
+    url: "https://t3.ftcdn.net/jpg/01/71/57/72/240_F_171577280_Gj1SV9BV1vrvowWTexaiJW7OBj7uNgCT.jpg",
+  },
+  {
+    name: "England",
+    countryCode: "GB",
+    url: "https://t3.ftcdn.net/jpg/06/01/92/56/240_F_601925600_OPd3C0QuEE283YX2Fj6v3QtFFnkdtETF.jpg",
+  },
+];

src/components/layout/Header.jsx ADDED Viewed

	@@ -0,0 +1,244 @@

+import {
+  Avatar,
+  Box,
+  Flex,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+  Text,
+} from "@chakra-ui/react";
+import React, { useContext, useState } from "react";
+import { NavLink } from "react-router-dom";
+import { BsBell, BsCameraVideo } from "react-icons/bs";
+import { MdOutlineCastConnected } from "react-icons/md";
+import { BiSearch } from "react-icons/bi";
+import { IoCompassOutline } from "react-icons/io5";
+import { countries, sidebarData } from "../constants/Constants";
+import YoutubeContext from "../../context/YoutubeContext";
+import SearchBox from "./SearchBox";
+const Header = () => {
+  const { setCountry, country } = useContext(YoutubeContext);
+  const [isOpen, setIsOpen] = useState(false);
+  const [flag, setFlag] = useState(
+    "https://t4.ftcdn.net/jpg/02/81/47/57/240_F_281475718_rlQONmoS2E3CJtv0zFv2HwZ1weGhxpff.jpg"
+  );
+  return (
+    <>
+      <Box zIndex={10} position={"sticky"} top={0}>
+        <Box
+          borderBottomWidth="1px"
+          borderColor={"#303030"}
+          padding={{ base: "0px 10px", sm: "0px 10px", md: "8px 35px" }}
+          borderStyle={"solid"}
+          bg={"#0f0f0f"}
+        >
+          <Flex justifyContent={"space-between"} alignItems={"center"}>
+            <NavLink to="/">
+              <Flex gap={""} alignItems={"center"}>
+                <Image
+                  height={"7vh"}
+                  objectFit={"cover"}
+                  src={"/logo512.png"}
+                  alt="logo"
+                />
+                <Text color={"white"} fontWeight={"bold"}>
+                  YouTube
+                </Text>
+              </Flex>
+            </NavLink>
+            <Box>
+              <SearchBox />
+            </Box>
+            <Box
+              display={"flex"}
+              gap={{ base: 4, sm: 4, md: 6 }}
+              alignItems={"center"}
+            >
+              <Text
+                display={{ base: "none", sm: "none", md: "block" }}
+                fontSize={"xl"}
+                color={"white"}
+              >
+                <BsCameraVideo />
+              </Text>
+              <Text
+                display={{ base: "block", sm: "block", md: "none" }}
+                fontSize={"xl"}
+                color={"white"}
+              >
+                <MdOutlineCastConnected />
+              </Text>
+              <Text fontSize={"xl"} color={"white"}>
+                <BsBell />
+              </Text>
+              <Text
+                display={{ base: "block", sm: "block", md: "none" }}
+                fontSize={"xl"}
+                color={"white"}
+                _hover={{ cursor: "pointer" }}
+              >
+                <NavLink to="/search/mobile">
+                  <BiSearch />
+                </NavLink>
+              </Text>
+              <Menu>
+                <MenuButton>
+                  <Avatar
+                    display={{ base: "none", sm: "none", md: "block" }}
+                    size={"xs"}
+                    name="Coutry"
+                    src={flag}
+                  />
+                </MenuButton>
+                <Portal>
+                  <MenuList zIndex={11} bg={"#323232"}>
+                    {countries.map((country) => (
+                      <MenuItem
+                        bg={"#323232"}
+                        _hover={{ bg: "#5b5b5b" }}
+                        color={"white"}
+                        onClick={() => {
+                          setFlag(country.url);
+                          setCountry(country.countryCode);
+                        }}
+                        key={country.name}
+                      >
+                        {country.name}
+                      </MenuItem>
+                    ))}
+                  </MenuList>
+                </Portal>
+              </Menu>
+              <Avatar
+                display={{ base: "block", sm: "block", md: "none" }}
+                size={"xs"}
+                name="Avatar"
+                src={"https://cdn-icons-png.flaticon.com/128/2202/2202112.png"}
+              />
+            </Box>
+          </Flex>
+        </Box>
+        <Box
+          bg={"#0f0f0f"}
+          display={{ base: "block", sm: "block", md: "none" }}
+        >
+          <Flex
+            className="hidden-scrollbar"
+            width={"100%"}
+            overflow={"scroll"}
+            align={"center"}
+            size={"xs"}
+            padding={"5px 10px"}
+            gap={2}
+          >
+            <Box
+              color="white"
+              bg={"#303030"}
+              _hover={{ bg: "#424242", cursor: "pointer" }}
+              _active={{ bg: "#ededed", color: "black" }}
+              fontSize={"2xl"}
+              padding={"4px 8px"}
+              borderRadius={"4px"}
+              onClick={() => setIsOpen(!isOpen)}
+            >
+              <IoCompassOutline />
+            </Box>
+            {countries.map((country_) => (
+              <Box
+                onClick={() => setCountry(country_.countryCode)}
+                key={country_.name}
+                _hover={{ cursor: "pointer" }}
+                color={country === country_.countryCode ? "black" : "white"}
+                bg={country === country_.countryCode ? "#ededed" : "#303030"}
+                padding={"4px 8px"}
+                borderRadius={"4px"}
+              >
+                {country_.name}
+              </Box>
+            ))}
+          </Flex>
+        </Box>
+      </Box>
+      <MobileMenubar isOpen={isOpen} setIsOpen={setIsOpen} />
+    </>
+  );
+};
+export default Header;
+const MobileMenubar = ({ isOpen, setIsOpen }) => (
+  <>
+    <Box
+      width={"100vh"}
+      height={"100vw"}
+      position={"fixed"}
+      top={0}
+      left={0}
+      display={isOpen ? "Block" : "none"}
+      bg={"#0000009b"}
+      onClick={() => setIsOpen(!isOpen)}
+      zIndex={120}
+    >
+      <Box
+        bg="#303030"
+        height="100vh"
+        transform={isOpen ? "" : "translateX(-100%)"}
+        width={"80vw"}
+        transition={"all 1s"}
+        display={isOpen ? "Block" : "none"}
+        boxShadow="0px -1px 10px rgba(0, 0, 0, 0.1)"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <Box>
+          <Box marginBottom={"15px"} padding={"0px 10px"}>
+            <NavLink to="/">
+              <Flex alignItems={"center"}>
+                <Image
+                  height={"7vh"}
+                  objectFit={"cover"}
+                  src={"/logo512.png"}
+                  alt="logo"
+                />
+                <Text color={"white"} fontWeight={"bold"}>
+                  YouTube
+                </Text>
+              </Flex>
+            </NavLink>
+          </Box>
+          <Flex direction={"column"} gap="2">
+            {sidebarData.map((data) => (
+              <NavLink
+                key={data.name}
+                to={data.name === "Trending" ? "/" : `/?query=${data.name}`}
+              >
+                <Box
+                  color="white"
+                  display="flex"
+                  gap={4}
+                  padding="8px 20px"
+                  alignItems="center"
+                  _hover={{ background: "#3a3a3a" }}
+                >
+                  {" "}
+                  <Text fontSize="2xl">{data.icon} </Text>{" "}
+                  <Text>{data.name}</Text>
+                </Box>
+              </NavLink>
+            ))}
+          </Flex>
+        </Box>
+      </Box>
+    </Box>
+  </>
+);

src/components/layout/HomeSkeleton.jsx ADDED Viewed

	@@ -0,0 +1,47 @@

+import React from "react";
+import { Box, Flex, Skeleton, SkeletonCircle, Text } from "@chakra-ui/react";
+const HomeSkeleton = () => (
+  <>
+    <Box width={"100%"}>
+      <Skeleton>
+        <Box
+          borderRadius={"8px"}
+          position={"relative"}
+          backgroundRepeat={"no-repeat"}
+          height={"180px"}
+          backgroundImage={"url('https://i.ytimg.com/vi/-ME4gY9i4G4/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDlivhEse-sboxfW57u_wU_4KLAGQ')"}
+          backgroundSize={"cover"}
+          backgroundColor="#2e2c2c"
+          backgroundPosition={"center"}
+        ></Box>
+      </Skeleton>
+      <Flex marginTop={"10px"} gap={3}>
+        <SkeletonCircle>
+          <Box height={"35px"} borderRadius={"100%"} width={"35px"} />
+        </SkeletonCircle>
+        <Box color={"white"}>
+          <Skeleton>
+            <Text fontWeight={"semibold"}>
+              {
+                "This Is Video Home Title - This Is Video Home Title - This Is Video Home Title"
+              }
+            </Text>
+          </Skeleton>
+          <Skeleton>
+            <Text marginTop={"5px"} fontSize={"xs"}>
+              {"channelName"}
+            </Text>
+          </Skeleton>
+          <Skeleton>
+            <Text fontSize={"xs"}>20 M views 1 year ago</Text>
+          </Skeleton>
+        </Box>
+      </Flex>
+    </Box>
+  </>
+);
+export default HomeSkeleton;

src/components/layout/Layout.jsx ADDED Viewed

	@@ -0,0 +1,38 @@

+import React from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import Header from "./Header";
+import Sidebar from "./Sidebar";
+const Layout = ({ children }) => (
+  <>
+    <Box bg={"#0f0f0f"}>
+      <Header />
+      <Flex>
+        <Box
+          display={{ base: "none", sm: "none", md: "block" }}
+          flexShrink={0}
+          width={"280px"}
+        >
+          <Box
+            position={"fixed"}
+            top={"10vh"}
+            left={"0"}
+            minWidth={"fit-content"}
+          >
+            <Sidebar />
+          </Box>
+        </Box>
+        <Box>
+          <Box minHeight={"90vh"} width={"100%"} margin={"auto"}>
+            {children}
+          </Box>
+        </Box>
+      </Flex>
+    </Box>
+  </>
+);
+export default Layout;

src/components/layout/MobileSearch.jsx ADDED Viewed

	@@ -0,0 +1,107 @@

+import React, { useCallback, useContext, useEffect, useState } from "react";
+import {
+  Box,
+  Flex,
+  IconButton,
+  Input,
+  InputGroup,
+  Text,
+} from "@chakra-ui/react";
+import { BiArrowBack, BiSearch } from "react-icons/bi";
+import { MdKeyboardVoice } from "react-icons/md";
+import { NavLink, useNavigate } from "react-router-dom";
+import { debounce } from "lodash";
+import YoutubeContext from "../../context/YoutubeContext";
+const MobileSearch = () => {
+  const { generateAutocomplete, autocomplete } = useContext(YoutubeContext);
+  const [searchText, setSearchText] = useState("");
+  const generateAutocompleteFun = useCallback(
+    debounce((query) => {
+      generateAutocomplete(query);
+    }, 500),
+    []
+  );
+  const navigate = useNavigate();
+  const searchFun = () => {
+    navigate(`/?query=${searchText}`);
+  };
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+  return (
+    <>
+      <Box width={"100%"} minHeight={"100vh"} bg={"#0f0f0f"}>
+        <Flex padding={"8px 15px"} align={"center"} gap={4}>
+          <Text fontSize={"xl"} _hover={{ cursor: "pointer" }}>
+            <NavLink to="/">
+              <BiArrowBack color="white" />
+            </NavLink>
+          </Text>
+          <InputGroup>
+            <Input
+              border={"none"}
+              color={"white"}
+              placeholder="Search YouTube"
+              borderRadius={"30px"}
+              bg={"#303030"}
+              height={"fit-content"}
+              padding={"5px 15px"}
+              _focusVisible={false}
+              value={searchText || ""}
+              onChange={(e) => {
+                setSearchText(e.target.value);
+                generateAutocompleteFun(e.target.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  searchFun();
+                }
+              }}
+            />
+          </InputGroup>
+          {!searchText && (
+            <IconButton
+              size={"sm"}
+              bg={"#303030"}
+              _hover={{ bg: "#424242" }}
+              borderRadius="100%"
+              aria-label="Mice"
+              icon={<MdKeyboardVoice color="white" size={"24px"} />}
+            />
+          )}
+        </Flex>
+        <AutoSuggetionMobile autocomplete={autocomplete} />
+      </Box>
+    </>
+  );
+};
+export default MobileSearch;
+const AutoSuggetionMobile = ({ autocomplete }) => (
+  <>
+    <Flex direction={"column"} gap={2} marginTop={"15px"}>
+      {autocomplete &&
+        autocomplete.slice(0, 9).map((text) => (
+          <Box key={text} _hover={{ bg: "#3a3a3a" }}>
+            <NavLink to={`/?query=${text}`}>
+              <Flex padding={"10px 15px"} align={"center"} gap={5}>
+                <Text fontSize={"xl"}>
+                  <BiSearch color={"white"} />
+                </Text>
+                <Text color={"white"}>{text}</Text>
+              </Flex>
+            </NavLink>
+          </Box>
+        ))}
+    </Flex>
+  </>
+);

src/components/layout/MobileSidebar.jsx ADDED Viewed

	@@ -0,0 +1,12 @@

+// import React from "react";
+// const MobileSidebar = () => {
+//   return
+//   <>
+//     <Box>
+//     </Box>
+//   </>;
+// };
+// export default MobileSidebar;

src/components/layout/SearchBox.jsx ADDED Viewed

	@@ -0,0 +1,168 @@

+import {
+  Box,
+  IconButton,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Text,
+} from "@chakra-ui/react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { BiSearch } from "react-icons/bi";
+import { MdKeyboardVoice } from "react-icons/md";
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
+import { debounce } from "lodash";
+import YoutubeContext from "../../context/YoutubeContext";
+const SearchBox = () => {
+  const { generateAutocomplete, autocomplete } = useContext(YoutubeContext);
+  const [searchText, setSearchText] = useState("");
+  const [showSuggestion, setShowSuggestion] = useState(false);
+  const inputRef = useRef();
+  const generateAutocompleteFun = useCallback(
+    debounce((query) => {
+      generateAutocomplete(query);
+    }, 500),
+    []
+  );
+  useEffect(() => {
+    const handleMouseDown = (event) => {
+      if (event.target?.parentElement?.tagName === "A") return;
+      if (inputRef.current && !inputRef.current.contains(event.target)) {
+        setShowSuggestion(false);
+      }
+    };
+    const handleFocusIn = (event) => {
+      if (inputRef.current === event.target) {
+        setShowSuggestion(true);
+      } else {
+        // setShowSuggestion(false);
+      }
+    };
+    window.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("focusin", handleFocusIn);
+  });
+  // Access query parameters
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const query = queryParams.get("query");
+  useEffect(() => {
+    setSearchText(query);
+    setShowSuggestion(false);
+  }, [query]);
+  const navigate = useNavigate();
+  const searchFun = () => {
+    navigate(`/?query=${searchText}`);
+  };
+  return (
+    <>
+      <Box
+        display={{ base: "none", sm: "none", md: "flex" }}
+        alignItems={"center"}
+        gap={6}
+      >
+        <Box position={"relative"}>
+          <Box display={"flex"} alignItems="center" width={"500px"}>
+            <InputGroup>
+              <InputLeftElement pointerEvents="none">
+                <BiSearch size={"20px"} color="white" />
+              </InputLeftElement>
+              <Input
+                ref={inputRef}
+                focusBorderColor="#7373ff"
+                borderColor={"#303030"}
+                display={"flex"}
+                alignItems={"center"}
+                color={"white"}
+                placeholder="Search"
+                borderRadius={"30px 0 0 30px"}
+                fontSize={"lg"}
+                value={searchText || ""}
+                onChange={(e) => {
+                  setSearchText(e.target.value);
+                  generateAutocompleteFun(e.target.value);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    searchFun();
+                    setShowSuggestion(false);
+                  }
+                }}
+              />
+            </InputGroup>
+            <IconButton
+              borderColor={"#303030"}
+              borderWidth={"1px 1px 1px 0"}
+              borderStyle={"solid"}
+              borderRadius={"0 30px 30px 0"}
+              bg={"#303030"}
+              _hover={{ bg: "#424242" }}
+              icon={<BiSearch size={"24px"} color="white" />}
+              onClick={searchFun}
+            />
+          </Box>
+          <Box
+            position={"absolute"}
+            top={"45px"}
+            width="460px"
+            hidden={!showSuggestion}
+          >
+            <AutoSuggestion autocomplete={autocomplete} />
+          </Box>
+        </Box>
+        <Box>
+          <IconButton
+            bg={"#303030"}
+            _hover={{ bg: "#424242" }}
+            borderRadius="100%"
+            aria-label="Mice"
+            icon={<MdKeyboardVoice color="white" size={"24px"} />}
+          />
+        </Box>
+      </Box>
+    </>
+  );
+};
+export default SearchBox;
+const AutoSuggestion = ({ autocomplete }) => (
+  <>
+    {autocomplete && autocomplete.length !== 0 && (
+      <Box bg="#222222" borderRadius={"10px"} padding={"15px 0"}>
+        {autocomplete.map((text) => (
+          <NavLink to={`/?query=${text}`} key={text}>
+            <Text
+              display={"flex"}
+              gap={4}
+              alignItems={"center"}
+              color="white"
+              _hover={{ bg: "#3a3a3a" }}
+              padding={"3px 10px"}
+              fontSize={"lg"}
+            >
+              <BiSearch size={"20px"} color="white" />
+              {text}
+            </Text>
+          </NavLink>
+        ))}
+      </Box>
+    )}
+  </>
+);

src/components/layout/SearchSkeleton.jsx ADDED Viewed

	@@ -0,0 +1,70 @@

+import {
+  Box,
+  Flex,
+  Image,
+  Skeleton,
+  SkeletonCircle,
+  Text,
+} from "@chakra-ui/react";
+import React from "react";
+const SearchSkeleton = () => (
+  <>
+    <Flex width={"100%"} gap={5}>
+      <Skeleton>
+        <Box
+          backgroundColor="#2e2c2c"
+          borderRadius={"8px"}
+          position={"relative"}
+          overflow={"hidden"}
+          width={"310px"}
+          height={"170px"}
+        >
+          <Image
+            src={"'https://i.ytimg.com/vi/-ME4gY9i4G4/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDlivhEse-sboxfW57u_wU_4KLAGQ"}
+            height="100%"
+            width={"100%"}
+            alt="thumbnail"
+            objectFit={"cover"}
+          />
+        </Box>
+      </Skeleton>
+      <Box width="70%">
+        <Skeleton>
+          {" "}
+          <Text fontSize={"2xl"} color={"white"}>
+              This is title for a Video, This is title for a Video, This is
+          </Text>
+          <Text fontSize={"2xl"} color={"white"}>
+              This is title Line
+          </Text>
+        </Skeleton>
+        <Skeleton>
+          <Text marginTop={"5px"} color={"#b7b5b5"} fontSize={"sm"}>
+              2m views 1 day ago
+          </Text>
+        </Skeleton>
+        <Flex marginTop={"10px"} gap={3} alignItems={"center"}>
+          <SkeletonCircle>
+            <Image
+              height={"35px"}
+              borderRadius={"100%"}
+              src={"avatar"}
+              alt="channel"
+            />
+          </SkeletonCircle>
+          <Skeleton>
+            <Text color={"#b7b5b5"} fontSize={"sm"}>
+                channel name
+            </Text>
+          </Skeleton>
+        </Flex>
+      </Box>
+    </Flex>
+  </>
+);
+export default SearchSkeleton;

src/components/layout/Sidebar.jsx ADDED Viewed

	@@ -0,0 +1,42 @@

+import React from "react";
+import { NavLink } from "react-router-dom";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { sidebarData } from "../constants/Constants";
+const Sidebar = () => (
+  <>
+    <Flex
+      width={"fit-content"}
+      padding={"20px"}
+      direction={"column"}
+      height={"90vh"}
+      gap={2}
+      position={"relative"}
+      left={0}
+    >
+      {sidebarData.map((data) => (
+        <NavLink
+          key={data.name}
+          to={data.name === "Trending" ? "/" : `/?query=${data.name}`}
+        >
+          <Box
+            color="white"
+            display="flex"
+            gap={4}
+            borderRadius="5px"
+            padding="5px"
+            alignItems="center"
+            zIndex={10}
+            _hover={{ background: "#3a3a3a" }}
+          >
+            {" "}
+            <Text fontSize="2xl">{data.icon} </Text> <Text>{data.name}</Text>
+          </Box>
+        </NavLink>
+      ))}
+    </Flex>
+  </>
+);
+export default Sidebar;

src/components/list/RelatedList.jsx ADDED Viewed

	@@ -0,0 +1,131 @@

+import React, { useContext, useEffect } from "react";
+import { Grid, Box } from "@chakra-ui/react";
+import numeral from "numeral";
+import { formatDistanceToNow } from "date-fns";
+import RelatedVideoCard from "../cards/RelatedVideoCard";
+import HomeVideoCard from "../cards/HomeVideoCard";
+import YoutubeContext from "../../context/YoutubeContext";
+const RelatedList = ({ videoId }) => {
+  const { trendingVideos, country, getTrendingVideos } =
+    useContext(YoutubeContext);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    getTrendingVideos();
+  }, [country]);
+  return (
+    <>
+      <Box display={{ base: "none", sm: "none", md: "block" }}>
+        <Grid gap={5} padding={{ base: "8px", md: "0px" }}>
+          {trendingVideos &&
+            trendingVideos
+              .filter((video) => video.id !== videoId)
+              .map((video) => (
+                <RelatedVideoCard
+                  videoId={video.id}
+                  channelId={video?.snippet?.channelId}
+                  duration={
+                    video.contentDetails?.duration
+                      ? durationConverter(video.contentDetails?.duration)
+                      : ""
+                  }
+                  key={video.id}
+                  title={
+                    video.snippet?.title
+                      ? formateTitle(convertHtmlEntities(video.snippet.title))
+                      : ""
+                  }
+                  thumbnail={
+                    video?.snippet.thumbnails?.maxres?.url ||
+                    video?.snippet.thumbnails?.standard?.url ||
+                    ""
+                  }
+                  postTime={timeConverter(video.snippet.publishedAt)}
+                  views={viewsConverter(video.statistics.viewCount)}
+                  channelName={video.snippet.channelTitle}
+                />
+              ))}
+        </Grid>
+      </Box>
+      <Box display={{ base: "block", sm: "block", md: "none" }}>
+        <Grid gap={5} padding={{ base: "8px", md: "0px" }}>
+          {trendingVideos &&
+            trendingVideos
+              .filter((video) => video.id !== videoId)
+              .map((video) => (
+                <HomeVideoCard
+                  videoId={video.id}
+                  channelId={video?.snippet?.channelId}
+                  duration={
+                    video.contentDetails?.duration
+                      ? durationConverter(video.contentDetails?.duration)
+                      : ""
+                  }
+                  key={video.id}
+                  title={
+                    video.snippet?.title
+                      ? formateTitle(convertHtmlEntities(video.snippet.title))
+                      : ""
+                  }
+                  thumbnail={
+                    video?.snippet.thumbnails?.maxres?.url ||
+                    video?.snippet.thumbnails?.standard?.url ||
+                    ""
+                  }
+                  postTime={timeConverter(video.snippet.publishedAt)}
+                  views={viewsConverter(video.statistics.viewCount)}
+                  channelName={video.snippet.channelTitle}
+                />
+              ))}
+        </Grid>
+      </Box>
+    </>
+  );
+};
+export default RelatedList;
+// Views
+const viewsConverter = (views) => {
+  const formattedViews = numeral(views).format("0.[00]a");
+  return formattedViews;
+};
+// Convert HTML entities in title
+function convertHtmlEntities(inputString) {
+  const textarea = document.createElement("textarea");
+  textarea.innerHTML = inputString;
+  return textarea.value;
+}
+// Video Duration
+const durationConverter = (duration) => {
+  const matches = duration.match(/PT(?:(\d+)M)?(\d+)S/);
+  if (!matches) return "";
+  const minutes = parseInt(matches[1]) || 0;
+  const seconds = parseInt(matches[2]) || 0;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+// Video Uploaded
+const timeConverter = (time) => {
+  const date = new Date(time);
+  return formatDistanceToNow(date, { addSuffix: true });
+};
+// Video Title
+const formateTitle = (title) => {
+  const char = title.split("");
+  if (char.length < 60) {
+    return title;
+  }
+  return `${char.slice(0, 60).join("")}...`;
+};

src/components/list/SearchList.jsx ADDED Viewed

	@@ -0,0 +1,103 @@

+import React, { Fragment, useContext, useEffect } from "react";
+import { Grid } from "@chakra-ui/react";
+import { useLocation } from "react-router-dom";
+import { formatDistanceToNow } from "date-fns";
+import YoutubeContext from "../../context/YoutubeContext";
+import HomeVideoCard from "../cards/HomeVideoCard";
+import HomeSkeleton from "../layout/HomeSkeleton";
+const SearchVideoList = () => {
+  const { getSearchVideos, searchVideos, isLoading, country } =
+    useContext(YoutubeContext);
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  // Access query parameters
+  const query = queryParams.get("query");
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    getSearchVideos(query);
+  }, [query, country]);
+  return (
+    <Fragment>
+      <Grid
+        gridTemplateColumns={{
+          base: "1fr",
+          sm: "1fr",
+          md: "1fr 1fr",
+          lg: "1fr 1fr 1fr",
+        }}
+        gap={5}
+        width="100%"
+        padding={{ base: "0px", sm: "0px", md: "30px" }}
+        paddingTop={"5px"}
+      >
+        {isLoading ? (
+          <>
+            <HomeSkeleton />
+            <HomeSkeleton />
+            <HomeSkeleton />
+            <HomeSkeleton />
+            <HomeSkeleton />
+            <HomeSkeleton />
+          </>
+        ) : (
+          ""
+        )}
+        {searchVideos &&
+          searchVideos.map((video) => (
+            <HomeVideoCard
+              key={video.id.videoId}
+              videoId={video.id.videoId}
+              channelId={video?.snippet?.channelId}
+              duration={"04:35"}
+              title={formateTitle(convertHtmlEntities(video.snippet.title))}
+              thumbnail={video.snippet.thumbnails.high.url}
+              avatar={""}
+              postTime={timeConverter(video.snippet.publishedAt)}
+              views={""}
+              channelName={video.snippet.channelTitle}
+            />
+          ))}
+        <>
+          <HomeSkeleton />
+          <HomeSkeleton />
+          <HomeSkeleton />
+          <HomeSkeleton />
+          <HomeSkeleton />
+          <HomeSkeleton />
+        </>
+      </Grid>
+    </Fragment>
+  );
+};
+export default SearchVideoList;
+// Video Uploaded Time,
+const timeConverter = (time) => {
+  const date = new Date(time);
+  return formatDistanceToNow(date, { addSuffix: true });
+};
+// Convert HTML entities in title
+function convertHtmlEntities(inputString) {
+  const textarea = document.createElement("textarea");
+  textarea.innerHTML = inputString;
+  return textarea.value;
+}
+// Video Title
+const formateTitle = (title) => {
+  const char = title.split("");
+  if (char.length < 60) {
+    return title;
+  }
+  return `${char.slice(0, 60).join("")}...`;
+};

src/components/list/TrendingList.jsx ADDED Viewed

	@@ -0,0 +1,252 @@

+import React, { useContext, useEffect } from "react";
+import { Box, Grid, Text } from "@chakra-ui/react";
+import { formatDistanceToNow } from "date-fns";
+import numeral from "numeral";
+import InfiniteScroll from "react-infinite-scroll-component";
+import axios from "axios";
+import YoutubeContext from "../../context/YoutubeContext";
+import SearchSkeleton from "../layout/SearchSkeleton";
+import { errorHandling } from "../../utils/utils";
+import SearchVideoCard from "../cards/SearchVideoCard";
+import HomeSkeleton from "../layout/HomeSkeleton";
+import HomeVideoCard from "../cards/HomeVideoCard";
+const TrendingList = () => {
+  const {
+    trendingVideos,
+    country,
+    getTrendingVideos,
+    isLoading,
+    setIsLoading,
+    setTrendingVideos,
+    trendingVideosLength,
+    nextPageToken,
+    setNextPageToken,
+  } = useContext(YoutubeContext);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    getTrendingVideos();
+  }, [country]);
+  const fetchMoreData = async () => {
+    try {
+      setIsLoading(true);
+      console.log(nextPageToken);
+      const res2 = await axios.get(
+        `https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics&chart=mostPopular&regionCode=${country}&key=${process.env.REACT_APP_YOUTUBE_API_KEY_GOOGLE2}&maxResults=15&pageToken=${nextPageToken}`
+      );
+      setTrendingVideos((prevTrendingVideos) => [
+        ...prevTrendingVideos,
+        ...res2.data.items,
+      ]);
+      setIsLoading(false);
+      setNextPageToken(res2.data.nextPageToken);
+    } catch (error) {
+      try {
+        setIsLoading(true);
+        const res2 = await axios.get(
+          `https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics&chart=mostPopular&regionCode=${country}&key=${process.env.REACT_APP_YOUTUBE_API_KEY_GOOGLE1}&maxResults=15&pageToken=${nextPageToken}`
+        );
+        setTrendingVideos((prevTrendingVideos) => [
+          ...prevTrendingVideos,
+          ...res2.data.items,
+        ]);
+        setIsLoading(false);
+        setNextPageToken(res2.data.nextPageToken);
+      } catch (error) {
+        errorHandling(error);
+      }
+    }
+  };
+  return (
+    <>
+      <Box display={{ base: "none", sm: "none", md: "block" }}>
+        <InfiniteScroll
+          dataLength={trendingVideos.length} //This is important field to render the next data
+          next={fetchMoreData}
+          hasMore={
+            trendingVideosLength > trendingVideos.length + 1 ? true : false
+          }
+          loader={
+            isLoading ? (
+              <Grid gap={5} padding={"30px"}>
+                <>
+                  <SearchSkeleton />
+                  <SearchSkeleton />
+                  <SearchSkeleton />
+                </>
+              </Grid>
+            ) : (
+              ""
+            )
+          }
+          endMessage={
+            <Text color={"white"} textAlign={"center"} padding={"20px"}>
+              <b>👍 Yay! You have seen it all</b>
+            </Text>
+          }
+        >
+          <>
+            <Grid gap={5} padding={"30px"}>
+              {trendingVideos &&
+                trendingVideos.map((video) => (
+                  <SearchVideoCard
+                    videoId={video.id}
+                    channelId={video?.snippet?.channelId}
+                    duration={
+                      video.contentDetails?.duration
+                        ? durationConverter(video.contentDetails?.duration)
+                        : ""
+                    }
+                    key={video.id}
+                    title={
+                      video.snippet?.title
+                        ? formateTitle(convertHtmlEntities(video.snippet.title))
+                        : ""
+                    }
+                    thumbnail={
+                      video?.snippet.thumbnails?.maxres?.url ||
+                      video?.snippet.thumbnails?.standard?.url ||
+                      ""
+                    }
+                    avatar={""}
+                    postTime={timeConverter(video.snippet.publishedAt)}
+                    views={viewsConverter(video.statistics.viewCount)}
+                    channelName={video.snippet.channelTitle}
+                  />
+                ))}
+              {trendingVideosLength > trendingVideos.length + 1 ? (
+                <>
+                  <SearchSkeleton />
+                  <SearchSkeleton />
+                  <SearchSkeleton />
+                </>
+              ) : (
+                ""
+              )}
+            </Grid>
+          </>
+        </InfiniteScroll>
+      </Box>
+      <Box display={{ base: "block", sm: "block", md: "none" }}>
+        <InfiniteScroll
+          dataLength={trendingVideos.length} //This is important field to render the next data
+          // next={fetchMoreData}
+          hasMore={
+            trendingVideosLength > trendingVideos.length + 1 ? true : false
+          }
+          loader={
+            isLoading ? (
+              <Grid gap={5}>
+                <>
+                  <HomeSkeleton />
+                  <HomeSkeleton />
+                  <HomeSkeleton />
+                </>
+              </Grid>
+            ) : (
+              ""
+            )
+          }
+          endMessage={
+            <Text color={"white"} textAlign={"center"} padding={"20px"}>
+              <b>👍 Yay! You have seen it all</b>
+            </Text>
+          }
+        >
+          <>
+            <Grid gap={5} paddingTop={"5px"}>
+              {trendingVideos &&
+                trendingVideos.map((video) => (
+                  <HomeVideoCard
+                    videoId={video.id}
+                    channelId={video?.snippet?.channelId}
+                    duration={
+                      video.contentDetails?.duration
+                        ? durationConverter(video.contentDetails?.duration)
+                        : ""
+                    }
+                    key={video.id}
+                    title={
+                      video.snippet?.title
+                        ? formateTitle(convertHtmlEntities(video.snippet.title))
+                        : ""
+                    }
+                    thumbnail={
+                      video?.snippet.thumbnails?.maxres?.url ||
+                      video?.snippet.thumbnails?.standard?.url ||
+                      ""
+                    }
+                    avatar={""}
+                    postTime={timeConverter(video.snippet.publishedAt)}
+                    views={viewsConverter(video.statistics.viewCount)}
+                    channelName={video.snippet.channelTitle}
+                  />
+                ))}
+              {trendingVideosLength > trendingVideos.length + 1 ? (
+                <>
+                  <HomeSkeleton />
+                  <HomeSkeleton />
+                  <HomeSkeleton />
+                </>
+              ) : (
+                ""
+              )}
+            </Grid>
+          </>
+        </InfiniteScroll>
+      </Box>
+    </>
+  );
+};
+export default TrendingList;
+// Views
+const viewsConverter = (views) => {
+  const formattedViews = numeral(views).format("0.[00]a");
+  return formattedViews;
+};
+// Convert HTML entities in title
+function convertHtmlEntities(inputString) {
+  const textarea = document.createElement("textarea");
+  textarea.innerHTML = inputString;
+  return textarea.value;
+}
+// Video Duration
+const durationConverter = (duration) => {
+  const matches = duration.match(/PT(?:(\d+)M)?(\d+)S/);
+  if (!matches) return "";
+  const minutes = parseInt(matches[1]) || 0;
+  const seconds = parseInt(matches[2]) || 0;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+// Video Uploaded
+const timeConverter = (time) => {
+  const date = new Date(time);
+  return formatDistanceToNow(date, { addSuffix: true });
+};
+// Video Title
+const formateTitle = (title) => {
+  const char = title.split("");
+  if (char.length < 100) {
+    return title;
+  }
+  return `${char.slice(0, 100).join("")}...`;
+};

src/context/YoutubeContext.js ADDED Viewed

	@@ -0,0 +1,128 @@

+import React, { createContext, useState } from "react";
+import axios from "axios";
+import { errorHandling } from "../utils/utils";
+const YoutubeContext = createContext()
+export default YoutubeContext
+export const ContextProvider = ({ children }) => {
+  const [trendingVideos, setTrendingVideos] = useState([]);
+  const [searchVideos, setSearchVideos] = useState([]);
+  const [trendingVideosLength, setTrendingVideosLength] = useState(15);
+  const [autocomplete, setAutocomplete] = useState([]);
+  const [country, setCountry] = useState("IN");
+  const [isLoading, setIsLoading] = useState(false);
+  const [nextPageToken, setNextPageToken] = useState("");
+  // 1. Autocomplete Suggetions
+  const generateAutocomplete = async (query) => {
+    try {
+      const res = await axios.get(`https://cors-handlers.vercel.app/api/?url=http%3A%2F%2Fsuggestqueries.google.com%2Fcomplete%2Fsearch%3Fclient%3Dfirefox%26ds%3Dyt%26q=${query}`)
+      //const str = await axios.get(`https://suggestqueries.google.com/complete/search?client=youtube&ds=yt&num=10&q=${query}`)
+      //console.log(res.data[1].map((arr) => arr))
+      setAutocomplete(res.data[1].map((arr) => arr))
+      //const res = await str.text();
+      //console.log(JSON.parse(res.data.split(/\(|\)/)[1])[1].map((arr) => arr[0]))
+      //setAutocomplete(JSON.parse(res.data.split(/\(|\)/)[1])[1].map((arr) => arr[0]))
+    } catch (error) {
+      console.log(error)
+      const options = {
+        method: "GET",
+        url: "https://youtube-data8.p.rapidapi.com/auto-complete/",
+        params: {
+          q: query,
+          hl: "en",
+          gl: "US"
+        },
+        headers: {
+          "X-RapidAPI-Key": process.env.REACT_APP_YOUTUBE_API_KEY_RAPIDAPI,
+          "X-RapidAPI-Host": "youtube-data8.p.rapidapi.com"
+        }
+      };
+      try {
+        const response = await axios.request(options);
+        //console.log(response.data);
+        setAutocomplete(response?.data?.results)
+      } catch (error) {
+        errorHandling(error)
+      }
+    }
+  }
+  // 2. Trending Videos
+  const getTrendingVideos = async () => {
+    setIsLoading(true)
+    try {
+      const res = await axios.get(`https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics&chart=mostPopular&regionCode=${country}&key=${`${process.env.REACT_APP_YOUTUBE_API_KEY_GOOGLE2}`}&maxResults=15`)
+      setTrendingVideos(res.data.items)
+      setTrendingVideosLength(res.data.pageInfo.totalResults)
+      setNextPageToken(res.data.nextPageToken)
+      setIsLoading(false)
+    } catch (error) {
+      try {
+        const res = await axios.get(`https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics&chart=mostPopular&regionCode=${country}&key=${`${process.env.REACT_APP_YOUTUBE_API_KEY_GOOGLE1}`}&maxResults=15`)
+        setTrendingVideos(res.data.items)
+        setTrendingVideosLength(res.data.pageInfo.totalResults)
+        setNextPageToken(res.data.nextPageToken)
+        setIsLoading(false)
+      } catch (error) {
+        errorHandling(error)
+      }
+    }
+  }
+  // 3. Search videos
+  const getSearchVideos = async (query) => {
+    setIsLoading(true)
+    const options = {
+      method: "GET",
+      url: "https://youtube-v31.p.rapidapi.com/search",
+      params: {
+        q: query,
+        part: "snippet,id",
+        regionCode: country,
+        maxResults: "50",
+        type: "video",
+        videoDuration: "medium"
+      },
+      headers: {
+        "X-RapidAPI-Key": `${process.env.REACT_APP_YOUTUBE_API_KEY_RAPIDAPI}`,
+        "X-RapidAPI-Host": "youtube-v31.p.rapidapi.com"
+      }
+    };
+    try {
+      const response = await axios.request(options);
+      console.log(response.data);
+      setIsLoading(false)
+      setSearchVideos(response.data.items)
+    } catch (error) {
+      alert("Rapid api not working using alternate api")
+      try {
+        const response2 = await axios.get(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=business&key=${process.env.REACT_APP_YOUTUBE_API_KEY_GOOGLE1}&maxResults=50&type=video&videoDuration=medium`)
+        console.log(response2.data);
+        setIsLoading(false)
+        setSearchVideos(response2.data.items)
+      } catch (error) {
+        errorHandling(error)
+      }
+    }
+  }
+  return (
+    <YoutubeContext.Provider value={{ nextPageToken, setNextPageToken, isLoading, generateAutocomplete, autocomplete, trendingVideos, getTrendingVideos, setTrendingVideos, country, setCountry, getSearchVideos, searchVideos, setIsLoading, trendingVideosLength }}>
+      {children}
+    </YoutubeContext.Provider>
+  )
+}

src/index.css ADDED Viewed

	@@ -0,0 +1,13 @@

+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js ADDED Viewed

	@@ -0,0 +1,21 @@

+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ChakraProvider } from "@chakra-ui/react"
+//import ReactGA from "react-ga4"
+import "./index.css";
+import App from "./App";
+import { ContextProvider } from "./context/YoutubeContext";
+//ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS_MEASUREMENT_ID)
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <ChakraProvider>
+      <ContextProvider>
+        <App />
+      </ContextProvider>
+    </ChakraProvider>
+  </React.StrictMode>
+);

src/pages/home/Home.jsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import TrendingList from "../../components/list/TrendingList";
+import SearchVideoList from "../../components/list/SearchList";
+import Layout from "../../components/layout/Layout";
+const Home = () => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+  // Access query parameters
+  const query = queryParams.get("query");
+  if (query) {
+    return (
+      <Layout>
+        <SearchVideoList />
+      </Layout>
+    );
+  } else {
+    return (
+      <Layout>
+        <TrendingList />
+      </Layout>
+    );
+  }
+};
+export default Home;

src/pages/video/Video.jsx ADDED Viewed

	@@ -0,0 +1,382 @@

+/* eslint-disable indent */
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import YouTube from "react-youtube";
+//import ReactPlayer from "react-player";
+import {
+  Avatar,
+  Box,
+  Button,
+  Flex,
+  IconButton,
+  Link,
+  Text,
+} from "@chakra-ui/react";
+import axios from "axios";
+import { BiLike, BiDislike } from "react-icons/bi";
+import { PiShareFatLight } from "react-icons/pi";
+import { LiaDownloadSolid } from "react-icons/lia";
+import { FiMoreHorizontal } from "react-icons/fi";
+import numeral from "numeral";
+import { formatDistanceToNow } from "date-fns";
+import Header from "../../components/layout/Header";
+import RelatedList from "../../components/list/RelatedList.jsx";
+import { errorHandling } from "../../utils/utils";
+const Video = () => {
+  const [videoDetails, setvideoDetails] = useState({});
+  const [channelDetails, setChannelDetails] = useState({});
+  const { videoId, channelId } = useParams();
+  const navigate = useNavigate();
+  const getVideoDetails = async () => {
+    try {
+      const res = await axios.get(
+        `https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics&id=${videoId}&key=${process.env.REACT_APP_YOUTUBE_API_KEY_GOOGLE2}`
+      );
+      setvideoDetails(res.data.items[0]);
+      console.log(res.data);
+    } catch (error) {
+      try {
+        const res = await axios.get(
+          `https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics&id=${videoId}&key=${process.env.REACT_APP_YOUTUBE_API_KEY_GOOGLE1}`
+        );
+        setvideoDetails(res.data.items[0]);
+        console.log(res.data);
+      } catch (error) {
+        errorHandling(error);
+      }
+    }
+  };
+  const getChannelDetails = async () => {
+    try {
+      const res2 = await axios.get(
+        `https://www.googleapis.com/youtube/v3/channels?part=snippet,contentDetails,statistics&id=${channelId}&key=${process.env.REACT_APP_YOUTUBE_API_KEY_GOOGLE2}`
+      );
+      console.log(res2.data);
+      setChannelDetails(res2.data.items[0]);
+    } catch (error) {
+      try {
+        const res2 = await axios.get(
+          `https://www.googleapis.com/youtube/v3/channels?part=snippet,contentDetails,statistics&id=${channelId}&key=${process.env.REACT_APP_YOUTUBE_API_KEY_GOOGLE1}`
+        );
+        console.log(res2.data);
+        setChannelDetails(res2.data.items[0]);
+      } catch (error) {
+        errorHandling(error);
+      }
+    }
+  };
+  useEffect(() => {
+    const handleBackButton = () => {
+      navigate("/"); // Redirect to the home page
+    };
+    window.onpopstate = handleBackButton;
+    return () => {
+      window.onpopstate = null; // Clean up the event listener
+    };
+  }, []);
+  useEffect(() => {
+    getVideoDetails();
+    window.scrollTo(0, 0);
+  }, [videoId]);
+  useEffect(() => {
+    getChannelDetails();
+  }, [channelId]);
+  // Video Options
+  const opts1 = {
+    height: "650",
+    width: "100%",
+    showRelatedVideos: false,
+    fullscreen: true,
+    playsinline: true,
+    playerVars: {
+      autoplay: 0, // Auto-play the video
+    },
+  };
+  const opts2 = {
+    height: "210px",
+    width: "100%",
+    showRelatedVideos: false,
+    fullscreen: true,
+    playsinline: true,
+    playerVars: {
+      autoplay: 0, // Auto-play the video
+    },
+  };
+  return (
+    <>
+      <Box display={{ base: "block", sm: "none", md: "block" }}>
+        <Header />
+      </Box>
+      <Flex
+        gap={5}
+        minHeight={"90vh"}
+        width={"100%"}
+        padding={{ base: "5px 0", md: "3vh 5vw" }}
+        bg="#0f0f0f"
+        direction={{ base: "column", sm: "column", md: "row" }}
+      >
+        <Box width={{ md: "60vw" }}>
+          <Box
+            width={"100%"}
+            height={"70vh"}
+            borderRadius= {"1vw"}
+            overflow={"hidden"}
+            background={"#2e2c2c"}
+            display={{ base: "none", sm: "none", md: "block" }}
+          >
+            {/* <ReactPlayer url={`https://www.youtube.com/watch?v=${videoId}`}
+            className="react-player" controls/> */}
+            {/* <iframe
+            width={"100%"}
+            height={"100%"}
+            src={`https://www.youtube.com/embed/${videoId}`}
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+          ></iframe> */}
+            <YouTube videoId={videoId} opts={opts1} />
+          </Box>
+          <Box
+            position={"sticky"}
+            top={"0"}
+            display={{ base: "block", sm: "block", md: "none" }}
+            zIndex={13}
+            height={"210px"}
+            background={"#2e2c2c"}
+          >
+            {/* <ReactPlayer url={`https://www.youtube.com/watch?v=${videoId}`}
+            className="react-player" controls/> */}
+            {/* <iframe
+            width={"100%"}
+            height={"100%"}
+            src={`https://www.youtube.com/embed/${videoId}`}
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+          ></iframe> */}
+            <YouTube videoId={videoId} opts={opts2} />
+          </Box>
+          <Box>
+            <Text
+              color={"white"}
+              padding={"8px"}
+              fontSize={{ base: "lg", md: "22px" }}
+            >
+              {videoDetails?.snippet?.title}
+            </Text>
+            <VideoDetails
+              videoDetails={videoDetails}
+              channelDetails={channelDetails}
+            />
+          </Box>
+          <Box display={{ base: "block", sm: "block", md: "none" }}>
+            <RelatedList videoId={videoId} />
+          </Box>
+        </Box>
+        <Box display={{ base: "none", sm: "none", md: "block" }}>
+          <RelatedList videoId={videoId} />
+        </Box>
+      </Flex>
+    </>
+  );
+};
+export default Video;
+const VideoDetails = ({ videoDetails, channelDetails }) => {
+  const [showMore, setShowMore] = useState(false);
+  const linkRegex = /(https?:\/\/[^\s]+)/g;
+  return (
+    <>
+      <Flex
+        direction={{ base: "column", sm: "column", md: "row" }}
+        align={{ base: "start", sm: "start", md: "center" }}
+        gap={{ md: 5 }}
+        justify={"space-between"}
+      >
+        <Flex
+          justify={{ base: "space-between" }}
+          padding={"8px"}
+          gap={3}
+          alignItems={"center"}
+        >
+          <Avatar
+            size={"md"}
+            name={channelDetails?.snippet?.title}
+            src={channelDetails?.snippet?.thumbnails?.medium?.url}
+          />
+          <Box>
+            <Text color={"white"}>{channelDetails?.snippet?.title}</Text>
+            <Text size={"xs"} color={"gray"}>
+              {viewsConverter(channelDetails?.statistics?.subscriberCount)}{" "}
+              subscribers
+            </Text>
+          </Box>
+          <Button
+            _hover={{ bg: "#b7b7b7" }}
+            bg="#e6e6e6"
+            color={"#303030"}
+            fontSize="14px"
+            borderRadius="20px"
+            size={"sm"}
+            alignSelf={"flex-end"}
+          >
+            Subscribe
+          </Button>
+        </Flex>
+        <Flex padding={"8px"} gap={1}>
+          <Box>
+            <Button
+              borderRadius={"20px 0 0 20px"}
+              color="white"
+              bg={"#303030"}
+              leftIcon={<BiLike size={"20px"} />}
+              borderRight={"1px"}
+              borderStyle={"solid"}
+              borderColor="white"
+              _hover={{ bg: "#424242" }}
+              fontSize={"14px"}
+              size={"sm"}
+            >
+              {viewsConverter(videoDetails?.statistics?.likeCount)}
+            </Button>
+            <IconButton
+              borderRadius={"0 20px 20px 0 "}
+              color="white"
+              _hover={{ bg: "#424242" }}
+              bg="#303030"
+              icon={<BiDislike size={"20px"} />}
+              size={"sm"}
+            />
+          </Box>
+          <Button
+            borderRadius={"20px"}
+            color="white"
+            _hover={{ bg: "#424242" }}
+            bg="#303030"
+            leftIcon={<PiShareFatLight size={"20px"} />}
+            fontSize={"14px"}
+            size={"sm"}
+          >
+            Share
+          </Button>
+          <Button
+            borderRadius={"20px"}
+            _hover={{ bg: "#424242" }}
+            bg="#303030"
+            color={"white"}
+            leftIcon={<LiaDownloadSolid size="20px" />}
+            fontSize={"14px"}
+            size={"sm"}
+            display={{ base: "none", md: "block" }}
+          >
+            Download
+          </Button>
+          <Button
+            borderRadius={"20px"}
+            _hover={{ bg: "#424242" }}
+            bg="#303030"
+            color={"white"}
+            leftIcon={<LiaDownloadSolid size="20px" />}
+            fontSize={"14px"}
+            size={"sm"}
+            display={{ base: "block", md: "none" }}
+          >
+            Stream on TG
+          </Button>
+          <IconButton
+            borderRadius={"20px"}
+            color="white"
+            _hover={{ bg: "#424242" }}
+            bg="#303030"
+            size={"sm"}
+            icon={<FiMoreHorizontal size={"20px"} />}
+          />
+        </Flex>
+      </Flex>
+      <Box
+        borderRadius={"20px"}
+        _hover={{ bg: "#424242", cursor: "pointer" }}
+        bg={"#303030"}
+        padding={"20px 15px"}
+        margin={{ base: "15px 8px", sm: "15px 8px", md: "15px  0" }}
+      >
+        <Text color={"white"}>
+          {viewsConverter(videoDetails?.statistics?.viewCount)} |{" "}
+          {videoDetails?.snippet?.publishedAt &&
+            timeConverter(videoDetails?.snippet?.publishedAt)}
+        </Text>
+        <Box
+          onClick={() => setShowMore(!showMore)}
+          color={"white"}
+          fontSize="15px"
+          whiteSpace={"pre-line"}
+        >
+          {showMore
+            ? videoDetails?.snippet?.description
+                .split(linkRegex)
+                .map((part, index) =>
+                  linkRegex.test(part, index) ? (
+                    <Link color={"#007bff"} href={part} key={index}>
+                      {part}
+                    </Link>
+                  ) : (
+                    part
+                  )
+                )
+            : `${videoDetails?.snippet?.description
+                .split("")
+                .slice(0, 80)
+                .join("")}...`
+                .split(linkRegex)
+                .map((part, index) =>
+                  linkRegex.test(part, index) ? (
+                    <Link color={"#007bff"} href={part} key={index}>
+                      {part}
+                    </Link>
+                  ) : (
+                    part
+                  )
+                )}
+        </Box>
+      </Box>
+    </>
+  );
+};
+// Views
+const viewsConverter = (views) => {
+  const formattedViews = numeral(views).format("0.[00]a");
+  return formattedViews;
+};
+// Video Uploaded
+const timeConverter = (time) => {
+  const date = new Date(time);
+  return formatDistanceToNow(date, { addSuffix: true });
+};

src/utils/utils.js ADDED Viewed

	@@ -0,0 +1,28 @@

+export const errorHandling = (error) => {
+  console.log(error);
+  if (error.isAxiosError) {
+    if (error.code === "ERR_NETWORK")
+      return alert("Network error. Please check your internet connection.");
+    if (error.response) {
+      const { status } = error.response;
+      if (status === 403) {
+        return alert("API quota exceeded. Please try again later.");
+      } else {
+        return alert(`Request failed with status ${status}. Please try again.`);
+      }
+    }
+    if (error.code === "ECONNABORTED") {
+      return alert("Request timeout. Please check your network connection.");
+    } else {
+      return alert("An error occurred while fetching data. Please try again later.");
+    }
+  } else {
+    return alert("An unexpected error occurred. Please try again later.");
+  }
+};