From 7bd243f26e9e0951eccfe2834c0c7b37a33637f0 Mon Sep 17 00:00:00 2001
From: Prajwal Kulkarni <prajwalkulkarni76@gmail.com>
Date: Sun, 21 Jul 2024 13:17:41 +0530
Subject: [PATCH] Add secondary media src

---
 src/components/Episode.tsx     |  17 +++-
 src/components/MediaPortal.tsx |  35 +++++---
 src/components/Seasons.tsx     |  63 ++++++--------
 src/context/Context.tsx        |   1 -
 src/pages/Home.tsx             |  23 +----
 src/pages/Landing.tsx          |   1 -
 src/pages/Movie.tsx            | 150 +++++++++++----------------------
 7 files changed, 119 insertions(+), 171 deletions(-)

diff --git a/src/components/Episode.tsx b/src/components/Episode.tsx
index 8f1c908..a86f0af 100644
--- a/src/components/Episode.tsx
+++ b/src/components/Episode.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
 import ReactDOM from "react-dom";
 import MediaPortal from "./MediaPortal";
@@ -15,7 +15,8 @@ type Props = {
 const Episode: React.FC<Props> = (props) => {
   const { image, imdbID, season, episode, name, overview, air_date } = props;
 
-  const [play, setPlay] = React.useState(false);
+  const [play, setPlay] = useState(false);
+  const [src, setSrc] = useState<number>(0);
 
   return (
     <div className="flex flex-col p-1 m-2 bg-white md:flex-row">
@@ -26,6 +27,7 @@ const Episode: React.FC<Props> = (props) => {
             imdbID={imdbID}
             onClick={() => setPlay(false)}
             season={season}
+            src={src}
             episode={episode}
           />,
           document.getElementById("portal") as HTMLElement
@@ -39,11 +41,20 @@ const Episode: React.FC<Props> = (props) => {
         <h1 className="text-2xl font-bold">{name}</h1>
         <p className="text-md">{overview}</p>
         <p className="text-sm">Air Date: {air_date}</p>
-        <div className="flex items-end h-full ">
+        <div className="flex items-end h-full gap-x-1">
           <ButtonCustom onClick={() => setPlay(true)}>
             <PlayCircleOutlineIcon />
             Watch
           </ButtonCustom>
+          <ButtonCustom
+            variant="outlined"
+            onClick={() => {
+              setPlay(true);
+              setSrc(1);
+            }}
+          >
+            Watch #2
+          </ButtonCustom>
         </div>
       </div>
     </div>
diff --git a/src/components/MediaPortal.tsx b/src/components/MediaPortal.tsx
index 6922f48..5070f67 100644
--- a/src/components/MediaPortal.tsx
+++ b/src/components/MediaPortal.tsx
@@ -7,33 +7,48 @@ const MediaPortal: React.FC<{
   episode?: number;
   season?: number;
   onClick: React.MouseEventHandler<HTMLDivElement>;
+  src: number;
 }> = (props) => {
-  const { mediaType, imdbID, season, episode } = props;
+  const { mediaType, imdbID, season, episode, onClick, src } = props;
 
-  const vidSrc = `${
-    mediaType === "series"
-      ? "tv/" + imdbID + "/" + season + "/" + episode
-      : "movie/" + imdbID
-  }`;
+  let vidSrc = "";
+
+  if (src === 0) {
+    vidSrc = `${
+      mediaType === "series"
+        ? "tv/" + imdbID + "/" + season + "/" + episode
+        : "movie/" + imdbID
+    }`;
+  } else {
+    vidSrc = `${
+      mediaType === "series"
+        ? "tv/" + imdbID + "/" + season + "-" + episode
+        : "movie/" + imdbID
+    }`;
+  }
+
+  let mediaSrc =
+    src === 0
+      ? process.env.REACT_APP_PLAYER_URL
+      : process.env.REACT_APP_PLAYER_URL_SECONDARY;
 
   return (
     <div className="fixed top-0 left-0 z-10 flex items-center justify-center w-screen h-screen bg-black">
       <div
         className="fixed top-0 font-bold text-white right-5 hover:cursor-pointer"
-        onClick={props.onClick}
+        onClick={onClick}
       >
         <CloseIcon />
       </div>
 
       <div className="z-20 w-full md:w-4/5 md:h-3/4">
         <iframe
-          src={`${process.env.REACT_APP_PLAYER_URL}/${vidSrc}`}
-          frameBorder="0"
+          src={`${mediaSrc}/${vidSrc}`}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowFullScreen
           width={"100%"}
           height={"100%"}
-          title="Embedded youtube"
+          title="Embedded Player"
           className="w-full h-full"
         />
       </div>
diff --git a/src/components/Seasons.tsx b/src/components/Seasons.tsx
index 5c84c7c..a005742 100644
--- a/src/components/Seasons.tsx
+++ b/src/components/Seasons.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { useQuery } from "react-query";
 import CircularProgress from "@mui/material/CircularProgress";
 import Episode from "./Episode";
-import { getLatestAuthToken } from "../utils/manageToken";
+import { useGetEpisodeData } from "../pages/hooks/useGetEpisodeData";
 
 type EpisodeType = {
   air_date: string;
@@ -24,20 +23,10 @@ const Seasons = React.forwardRef<
 >((props, ref) => {
   const { title, imdbID, season, tmdbID } = props;
 
-  const queryKey = title ? title + season : "";
-  const { data, status, error } = useQuery(queryKey, async () => {
-    const token = await getLatestAuthToken();
-    const episodes = await fetch(
-      `https://54aoybt2ja.execute-api.ap-southeast-1.amazonaws.com/tmdb/${tmdbID}/season/${season}`,
-      {
-        headers: {
-          Authorization: "Bearer " + token,
-        },
-      }
-    );
-    const season_episodes = await episodes.json();
-    const episodes_json = season_episodes["season/" + season];
-    return episodes_json["episodes"];
+  const { data, loading, error } = useGetEpisodeData({
+    title,
+    season,
+    tmdbID: tmdbID!,
   });
 
   if (error) {
@@ -49,28 +38,32 @@ const Seasons = React.forwardRef<
     );
   }
 
-  return (
-    <div className="w-full h-full" ref={ref}>
-      {status === "loading" && (
+  if (loading) {
+    return (
+      <div className="w-full h-full" ref={ref}>
         <div className="flex justify-center py-2">
           <CircularProgress color="primary" />
         </div>
-      )}
-      {data &&
-        data.map((episode: EpisodeType) => {
-          return (
-            <Episode
-              key={episode.episode_number}
-              image={episode.still_path}
-              episode={episode.episode_number}
-              name={episode.name}
-              overview={episode.overview}
-              air_date={episode.air_date}
-              imdbID={imdbID}
-              season={season}
-            />
-          );
-        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full h-full" ref={ref}>
+      {data?.map((episode: EpisodeType) => {
+        return (
+          <Episode
+            key={episode.episode_number}
+            image={episode.still_path}
+            episode={episode.episode_number}
+            name={episode.name}
+            overview={episode.overview}
+            air_date={episode.air_date}
+            imdbID={imdbID}
+            season={season}
+          />
+        );
+      })}
     </div>
   );
 });
diff --git a/src/context/Context.tsx b/src/context/Context.tsx
index abd76d5..93b2d8b 100644
--- a/src/context/Context.tsx
+++ b/src/context/Context.tsx
@@ -118,7 +118,6 @@ export const ContextProvider: React.FC<PropsWithChildren> = (props) => {
   useEffect(() => {
     const auth = getAuth(app);
     onAuthStateChanged(auth, (user) => {
-      console.log(user);
       if (user && user?.emailVerified) {
         localStorage.setItem("auth", JSON.stringify(true));
         localStorage.setItem("email", JSON.stringify(user.email));
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index a4e3759..5d23a2b 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,13 +1,9 @@
 import React, { useContext, useEffect } from "react";
-import { collection, getDocs, getFirestore } from "firebase/firestore";
-import { app } from "../firebase";
-import { useQuery } from "react-query";
 import CircularProgress from "@mui/material/CircularProgress";
 import CarouselSlides from "../components/CarouselSlides";
 import { useCreateOrGetUser } from "./hooks/useCreateOrGetUser";
 import Context from "../context/Context";
-
-const db = getFirestore(app);
+import { useGetCarouselData } from "./hooks/useGetCarouselData";
 
 const CardListLazy = React.lazy(() => import("../components/CardList"));
 const Home: React.FC<{ movies: boolean }> = (props) => {
@@ -32,20 +28,9 @@ const Home: React.FC<{ movies: boolean }> = (props) => {
 
   const { movies } = props;
 
-  const {
-    data: carouselData,
-    isLoading,
-    isError,
-  } = useQuery(movies ? "carousel" : "carouselshows", async () => {
-    const querySnapshot = await getDocs(
-      collection(db, movies ? "home" : "shows")
-    );
-    const data = querySnapshot.docs.map((doc) => doc.data());
-
-    return data;
-  });
+  const { carouselData, loading, error } = useGetCarouselData({ movies });
 
-  if (isError) {
+  if (error) {
     return (
       <div className="flex flex-col items-center w-full h-full">
         <img src={require("../assets/error.png")} alt="Error" />
@@ -62,7 +47,7 @@ const Home: React.FC<{ movies: boolean }> = (props) => {
         </div>
       </section>
 
-      <MediaCardsContainer movies={movies} isLoading={isLoading} />
+      <MediaCardsContainer movies={movies} isLoading={loading} />
     </div>
   );
 };
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 787a8d9..1174015 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -141,7 +141,6 @@ const Landing: React.FC = () => {
             </motion.div>
           </div>
         </Card>
-        {/* <p>Bingenow is a streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices. You can watch as much as you want, whenever you want without a single commercial – all for one low monthly price. There's always something new to discover and new TV shows and movies are added every week!</p> */}
       </section>
 
       <section>
diff --git a/src/pages/Movie.tsx b/src/pages/Movie.tsx
index 9cb379e..fa66ad8 100644
--- a/src/pages/Movie.tsx
+++ b/src/pages/Movie.tsx
@@ -25,21 +25,7 @@ import { getHumanizedTimeFromMinutes } from "../utils/commonFunctions";
 import { useAddtoWatchlist } from "./hooks/useAddToWatchlist";
 import { getLatestAuthToken } from "../utils/manageToken";
 import { ButtonCustom } from "../../UI/Button";
-
-type MediaDetailsType = {
-  title: string;
-  year: string;
-  rated: string;
-  runtime: string;
-  genre: string;
-  director: string;
-  backdrop: string;
-  plot: string;
-  imdbRating: string;
-  actors: string;
-  seasons?: number;
-  tmdbID: string;
-};
+import { useGetMovieData } from "./hooks/useGetMovieData";
 
 const Movie: React.FC<Record<string, never>> = () => {
   const route = useParams();
@@ -57,9 +43,33 @@ const Movie: React.FC<Record<string, never>> = () => {
 
   const [season, setSeason] = React.useState(1);
 
+  const [src, setSrc] = useState<number>(0);
+
   const [play, setPlay] = React.useState(false);
   const { mediaType, imdbID } = route;
 
+  const { data, error, loading } = useGetMovieData({
+    imdbID: imdbID!,
+    mediaType,
+  });
+
+  const media_data = {
+    title: data?.title ?? "",
+    year: data?.year ?? "",
+    genre: data?.genre ?? "",
+    runtime: data?.runtime ?? "",
+    plot: data?.plot ?? "",
+    poster: `https://image.tmdb.org/t/p/w500${data?.backdrop}`,
+    imdbId: imdbID ?? "",
+    media: mediaType,
+  };
+  const {
+    isLoading: addToWatchlistIsLoading,
+    error: watchListError,
+    data: watchListData,
+    mutate: watchlistMutate,
+  } = useAddtoWatchlist(media_data);
+
   const changeSeason = (e: SelectChangeEvent<number>) => {
     setSeason(Number(e.target.value));
   };
@@ -78,7 +88,7 @@ const Movie: React.FC<Record<string, never>> = () => {
   }, []);
 
   const handleClose = useCallback(
-    (event: React.SyntheticEvent | Event, reason?: string) => {
+    (_: React.SyntheticEvent | Event, reason?: string) => {
       if (reason === "clickaway") {
         return;
       }
@@ -88,87 +98,6 @@ const Movie: React.FC<Record<string, never>> = () => {
     []
   );
 
-  const { data, error, isLoading } = useQuery([imdbID!], async () => {
-    const token = await getLatestAuthToken();
-    const backdrop = await fetch(
-      `https://54aoybt2ja.execute-api.ap-southeast-1.amazonaws.com/tmdb/find/${imdbID}`,
-      {
-        headers: {
-          Authorization: "Bearer " + token,
-        },
-      }
-    );
-    const backdrop_json = await backdrop.json();
-
-    const backdrop_path =
-      mediaType === "movie"
-        ? backdrop_json["movie_results"][0]["backdrop_path"] ||
-          backdrop_json["movie_results"][0]["poster_path"]
-        : backdrop_json["tv_results"][0]["backdrop_path"];
-    const tmdbId =
-      mediaType === "movie"
-        ? backdrop_json["movie_results"][0]["id"]
-        : backdrop_json["tv_results"][0]["id"];
-
-    const media_details = await fetch(
-      `https://54aoybt2ja.execute-api.ap-southeast-1.amazonaws.com/omdb/media/${imdbID}`,
-      {
-        headers: {
-          Authorization: "Bearer " + token,
-        },
-      }
-    );
-    const media_details_json = await media_details.json();
-
-    const data: MediaDetailsType = {
-      title: media_details_json["Title"],
-      year: media_details_json["Year"],
-      rated: media_details_json["Rated"],
-      runtime: media_details_json["Runtime"],
-      genre: media_details_json["Genre"],
-      director: media_details_json["Director"],
-      backdrop: backdrop_path,
-      plot: media_details_json["Plot"],
-      imdbRating: media_details_json["imdbRating"],
-      actors: media_details_json["Actors"],
-      tmdbID: tmdbId,
-    };
-    if (mediaType === "series") {
-      const seasons = await (
-        await fetch(
-          `https://54aoybt2ja.execute-api.ap-southeast-1.amazonaws.com/tmdb/${tmdbId}`,
-          {
-            headers: {
-              Authorization: "Bearer " + token,
-            },
-          }
-        )
-      ).json();
-      const seasons_count = seasons["number_of_seasons"];
-      data.seasons = seasons_count;
-      return data;
-    } else {
-      return data;
-    }
-  });
-
-  const media_data = {
-    title: data?.title ?? "",
-    year: data?.year ?? "",
-    genre: data?.genre ?? "",
-    runtime: data?.runtime ?? "",
-    plot: data?.plot ?? "",
-    poster: `https://image.tmdb.org/t/p/w500${data?.backdrop}`,
-    imdbId: imdbID ?? "",
-    media: mediaType,
-  };
-  const {
-    isLoading: addToWatchlistIsLoading,
-    error: watchListError,
-    data: watchListData,
-    mutate: watchlistMutate,
-  } = useAddtoWatchlist(media_data);
-
   if (!addToWatchlistIsLoading && watchListData && !toast.message) {
     setOpen(true);
 
@@ -183,7 +112,7 @@ const Movie: React.FC<Record<string, never>> = () => {
     return <Error />;
   }
 
-  if (isLoading) {
+  if (loading) {
     return <FullScreenLoader />;
   }
 
@@ -197,6 +126,7 @@ const Movie: React.FC<Record<string, never>> = () => {
                 mediaType="movie"
                 imdbID={imdbID!}
                 onClick={() => setPlay(false)}
+                src={src}
               />,
               document.getElementById("portal")!
             )}
@@ -302,10 +232,26 @@ const Movie: React.FC<Record<string, never>> = () => {
                       spacing={{ xs: 1, sm: 2 }}
                     >
                       {mediaType === "movie" && (
-                        <ButtonCustom onClick={() => setPlay(true)}>
-                          <PlayCircleOutlineIcon />
-                          Watch
-                        </ButtonCustom>
+                        <>
+                          <ButtonCustom
+                            onClick={() => {
+                              setPlay(true);
+                              setSrc(0);
+                            }}
+                          >
+                            <PlayCircleOutlineIcon />
+                            Watch
+                          </ButtonCustom>
+                          <ButtonCustom
+                            variant="outlined"
+                            onClick={() => {
+                              setPlay(true);
+                              setSrc(1);
+                            }}
+                          >
+                            Watch #2
+                          </ButtonCustom>
+                        </>
                       )}
                       <ButtonCustom
                         onClick={() => watchlistMutate?.()}