Add secondary media src

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>

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>

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>
   );
 });

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));

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>
   );
 };

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>