updated: constants

Nayana62 · Jan 18, 2024 · aff03de · aff03de
1 parent 653f024
commit aff03de
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 83 deletions.
diff --git a/.env.example b/.env.example
diff --git a/src/components/ErrorPage.js b/src/components/ErrorPage.js
@@ -2,13 +2,9 @@ import React from "react";
 
 const ErrorPage = ({ error }) => {
  return (
- <div className="flex mt-20 justify-center items-center">
- <div>
- <p className=" text-2xl sm:text-5xl font-bold mb-2">
- {error.code} error
- </p>
- <p className=" text-lg sm:text-xl">{error.message}</p>
- </div>
+ <div className="flex flex-col w-full h-screen justify-center items-center">
+ <p className=" text-2xl sm:text-5xl font-bold mb-2">{error.code} error</p>
+ <p className=" text-lg sm:text-xl">{error.message}</p>
  </div>
  );
 };

diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -0,0 +1,26 @@
+export const OFFSET_LIVE_CHAT = 20;
+
+export const OFFSET_SCROLL = 15;
+
+export const YOUTUBE_VIDEOS_API =
+ "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&maxResults=6&pageToken=%PAGE_TOKEN%&regionCode=IN&key=" +
+ process.env.REACT_APP_API_KEY;
+
+export const YOUTUBE_SUGGESTED_VIDEOS_API =
+ "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&maxResults=25&regionCode=IN&key=" +
+ process.env.REACT_APP_API_KEY;
+
+export const YOUTUBE_VIDEO_API =
+ "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&id=%VIDEO_ID%&key=" +
+ process.env.REACT_APP_API_KEY;
+
+export const YOUTUBE_SEARCH_SUGGESTIONS_API =
+ "http:https://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=";
+
+export const YOUTUBE_CHANNEL_API =
+ "https://youtube.googleapis.com/youtube/v3/channels?part=snippet%2CcontentDetails%2Cstatistics&id=%CHANNEL_ID%&key=" +
+ process.env.REACT_APP_API_KEY;
+
+export const YOUTUBE_SEARCH_API =
+ "https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=%QUERY%&key=" +
+ process.env.REACT_APP_API_KEY;
diff --git a/src/fetchData/getChannelData.js b/src/fetchData/getChannelData.js
@@ -1,8 +1,7 @@
+import { YOUTUBE_CHANNEL_API } from "../constants/constants";
+
 export const getChannelData = async (channelId, setChannelData) => {
- const API = process.env.REACT_APP_YOUTUBE_CHANNEL_API.replace(
- "%CHANNEL_ID%",
- channelId
- );
+ const API = YOUTUBE_CHANNEL_API.replace("%CHANNEL_ID%", channelId);
 
  try {
  const data = await fetch(API);

diff --git a/src/fetchData/getSearchResults.js b/src/fetchData/getSearchResults.js
@@ -1,8 +1,7 @@
+import { YOUTUBE_SEARCH_API } from "../constants/constants";
+
 export const getSearchResults = async (query, setSearchResults) => {
- const API = process.env.REACT_APP_YOUTUBE_SEARCH_API.replaceAll(
- "%QUERY%",
- query
- );
+ const API = YOUTUBE_SEARCH_API.replaceAll("%QUERY%", query);
 
  try {
  const data = await fetch(API);

diff --git a/src/fetchData/getVideo.js b/src/fetchData/getVideo.js
@@ -1,8 +1,7 @@
+import { YOUTUBE_VIDEO_API } from "../constants/constants";
+
 export const getVideo = async (videoId, setVideo) => {
- const API = process.env.REACT_APP_YOUTUBE_VIDEO_API.replace(
- "%VIDEO_ID%",
- videoId
- );
+ const API = YOUTUBE_VIDEO_API.replace("%VIDEO_ID%", videoId);
  try {
  const data = await fetch(API);
  const json = await data.json();

diff --git a/src/fetchData/getVideos.js b/src/fetchData/getVideos.js
@@ -1,5 +1,7 @@
+import { YOUTUBE_SUGGESTED_VIDEOS_API } from "../constants/constants";
+
 export const getVideos = async (setVideosList) => {
- const API = process.env.REACT_APP_YOUTUBE_VIDEOS_API;
+ const API = YOUTUBE_SUGGESTED_VIDEOS_API;
  try {
  const data = await fetch(API);
  const json = await data.json();

diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import SearchButtons from "../components/SearchButtons";
 import { addVideosList } from "../redux/scrollSlice";
+import { YOUTUBE_VIDEOS_API } from "../constants/constants";
 
 const Home = () => {
  const dispatch = useDispatch();
@@ -43,10 +44,7 @@ const Home = () => {
 
  const getVideos = async (pageToken) => {
  try {
- const API = process.env.REACT_APP_YOUTUBE_VIDEOS_API.replace(
- "%PAGE_TOKEN%",
- pageToken
- );
+ const API = YOUTUBE_VIDEOS_API.replace("%PAGE_TOKEN%", pageToken);
  const data = await fetch(API);
  const json = await data.json();
  dispatch(addVideosList(json));

diff --git a/src/pages/WatchVideo.js b/src/pages/WatchVideo.js
@@ -10,6 +10,7 @@ import Channel from "../components/Channel";
 import CommentsList from "../components/CommentsList";
 import commentsDummyData from "../constants/commentsDummyData";
 import LiveChat from "../components/LiveChat";
+import ErrorPage from "../components/ErrorPage";
 
 const WatchVideo = () => {
  const dispatch = useDispatch();
@@ -25,70 +26,84 @@ const WatchVideo = () => {
  });
  };
 
- const suggestedVideos = videosList.filter((videos) => videos.id !== videoId);
-
  useEffect(() => {
  dispatch(closeWatchMenu());
  getVideos(setVideosList);
  getVideo(videoId, setVideo);
  // eslint-disable-next-line
  }, []);
 
+ // if (videosList.length !== 0) {
+ // var suggestedVideos = videosList.filter((videos) => videos.id !== videoId);
+ // }
+
+ console.log("videosList", videosList);
+
  return (
- <div className=" block lg:flex">
- <div className="watch-video overflow-y-auto h-full w-full lg:w-8/12 relative sm:top-16 px-5 pt-0 sm:pt-6 pl-5 xl:pl-20 left-0 z-6">
- <div>
- <iframe
- width="100%"
- height="520"
- src={"https://www.youtube.com/embed/" + videoId}
- title="YouTube video player"
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
- allowFullScreen
- style={{ borderRadius: "10px" }}
- ></iframe>
- {video !== null && (
- <>
- <div className=" font-bold text-xl my-2">
- {video?.snippet?.title}
- </div>
+ <>
+ {videosList.error ? (
+ <ErrorPage error={videosList.error} />
+ ) : (
+ <div className=" block lg:flex">
+ <div className="watch-video overflow-y-auto h-full w-full lg:w-8/12 relative sm:top-16 px-5 pt-0 sm:pt-6 pl-5 xl:pl-20 left-0 z-6">
+ <div>
+ <iframe
+ width="100%"
+ height="520"
+ src={"https://www.youtube.com/embed/" + videoId}
+ title="YouTube video player"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+ allowFullScreen
+ style={{ borderRadius: "10px" }}
+ ></iframe>
+ {video !== null && (
+ <>
+ <div className=" font-bold text-xl my-2">
+ {video?.snippet?.title}
+ </div>
 
- <div className="flex items-center mb-4">
- <Channel channelId={video.snippet.channelId} />
- <button className=" ml-5 bg-black px-4 py-2 rounded-3xl text-sm font-semibold text-white">
- Subscribe
- </button>
- </div>
- </>
- )}
- <h2 className=" font-bold text-lg mb-2">Comments:</h2>
- <CommentsList comments={commentsDummyData} />
- </div>
- </div>
- <div className="hidden w-4/12 lg:block">
- <LiveChat />
- <div className="relative top-[6rem]">
- <div className="search-buttons bg-white flex items-center h-12 w-[22rem] xl:w-[25rem] relative overflow-x-auto top-0 right-0 z-10">
- <ButtonsList />
+ <div className="flex items-center mb-4">
+ <Channel channelId={video.snippet.channelId} />
+ <button className=" ml-5 bg-black px-4 py-2 rounded-3xl text-sm font-semibold text-white">
+ Subscribe
+ </button>
+ </div>
+ </>
+ )}
+ <h2 className=" font-bold text-lg mb-2">Comments:</h2>
+ <CommentsList comments={commentsDummyData} />
+ </div>
  </div>
- </div>
- <div className="suggested-videos w-[25rem] relative right-0 top-[7rem] z-6">
- <div className="">
- {suggestedVideos.map((videos) => {
- return (
- <Link
- key={videos.id}
- to={"/watch?v=" + videos.id}
- onClick={handleScrollTop}
- >
- <SuggestedVideos info={videos} />
- </Link>
- );
- })}
+ <div className="hidden w-4/12 lg:block">
+ <LiveChat />
+ <div className="relative top-[6rem]">
+ <div className="search-buttons bg-white flex items-center h-12 w-[22rem] xl:w-[25rem] relative overflow-x-auto top-0 right-0 z-10">
+ <ButtonsList />
+ </div>
+ </div>
+ <div className="suggested-videos w-[25rem] relative right-0 top-[7rem] z-6">
+ {videosList.length !== 0 && (
+ <div className="">
+ {videosList
+ .filter((videos) => videos.id !== videoId)
+ .map((videos) => {
+ return (
+ <Link
+ key={videos.id}
+ to={"/watch?v=" + videos.id}
+ onClick={handleScrollTop}
+ >
+ <SuggestedVideos info={videos} />
+ </Link>
+ );
+ })}
+ </div>
+ )}
+ </div>
  </div>
  </div>
- </div>
- </div>
+ )}
+ </>
  );
 };