Get detail of movies from firebase

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,51 @@
+asset-manifest.json,1629572121590,144506236c3b386d224cf9cc20d4df124c6f48a74d1f16ecca7d12527d606937
+robots.txt,1629572099844,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+manifest.json,1629572099844,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+index.html,1629572121590,e79ea989a0070d848fcdbea02cb2ff308641785be61679aa708d5c6f37fa94a3
+logo192.png,1629572099844,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
+images/group-icon.png,1629572099836,ef77122a88636917c495840ef4df78c2712402ae43570dc0002cc9b53b089ca0
+images/home-icon.svg,1629572099837,2c8ee3b2e227ed3ae38d56b45eb75a9f4a8860f7285aab4482c02c4fc4034ebb
+logo512.png,1629572099844,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
+favicon.ico,1629572099834,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
+images/cta-logo-one.png,1629572099835,fe178df954f3de4f8986beaf97c074418b25ba2d6ca7cd60df239c80fa688d23
+images/movie-icon.svg,1629572099840,66778dae9114b6ed62ab9ff8a4b028519820fcadee6430a0caba57a9b8ae9b75
+images/original-icon.svg,1629572099840,802187f7ecc3fd661d08bc3cfe7034ecade5bf4aa6d25ce7eeedc90b3c70819e
+images/cta-logo-one.svg,1629572099835,de7b086ec48bbf898124cfe8d80a2fdf51ce1db2cb966d271702873611a418b2
+images/cta-logo-two.png,1629572099835,40fe7b29065c0be1db600b6fdd4454d69019edfa897231a9913ffb778ba802b6
+images/play-icon-white.png,1629572099840,e4910710327302b6ac528a673857d03ebe4da7809910893a5f3171614f610914
+images/play-icon-black.png,1629572099840,4c65067356b0607575a1f9afc0e93286f2494b9d96e4f663d99ee80fefe55e29
+images/search-icon.svg,1629572099840,8bc29283957447c99827d4a23d8f893a34c73d20a821aac2141b7d038a60df84
+images/series-icon.svg,1629572099840,7fa955c39fa96855b14a8e3f22f81a23656b39106c6cd6b3f2a31f2340cf67d2
+images/logo.svg,1629572099839,3f4a83a4101b5842aa65476f8f613155dd5201817f20c5ae5b8587dfad5e2897
+images/viewers-marvel.png,1629572099842,42b2a176e012dcac720c39fcd0c3358e022adefa7ad35ee125e0f1f1559f0450
+images/viewers-disney.png,1629572099842,1cdeb6d6e80e5fdf3e8d10aa6084a3ac145e0ce2d99178c2cd59b0dfb912af19
+static/css/main.c33fd2ac.chunk.css,1629572121589,50804d36d81e401b7eafa2fcdc7399015dc41f8d5ed37cfbf89bd6c2674c6d03
+images/viewers-national.png,1629572099843,1885954a6996acdb06209531ec6a35708050b9dc401814d47bd8de9585981216
+static/css/main.c33fd2ac.chunk.css.map,1629572121590,18922f940116039421d37d7e1c296872a9d7fbca26b9425651f38e2a07e0cb0a
+images/watchlist-icon.svg,1629572099843,4191aebae6f401fd9280d5e749296db6f811016d6238491f1d2e96ccb247e900
+static/css/2.19627560.chunk.css,1629572121590,776ad8caf4cbef21864ab064191140385462d8744a631e8b45e3757a9330cecf
+static/css/2.19627560.chunk.css.map,1629572121589,15e3ee42054e2406c6ac3ad388e10ac8b9e87e36e6703254e4615283ec91cc87
+static/js/2.5bd2d408.chunk.js.LICENSE.txt,1629572121589,a5a9d5b5d614801bc1e659256140ced1260ae0b6167020a730390b87950cb4a9
+static/js/runtime-main.604e677b.js,1629572121590,271837bc9e4650f2a067d39a5c1042bfbb4f7965bf742d7727f89ab7e1a724ef
+static/js/runtime-main.604e677b.js.map,1629572121589,7ffe8d9a5f1154fc01a6fad57250695274914df12d998650220f887fa7488c6c
+images/viewers-pixar.png,1629572099843,58a976f54533c796bc2e85a539e32555e23e6b78bc08f5b0c627670dabb2f2fb
+static/media/slick.2630a3e3.svg,1629572121589,dfcaf4b122493a401fefdf30d8d0fa438d8c2eae8c71798fe6e08b32f91dc0ff
+static/js/main.3dba47a0.chunk.js,1629572121580,4b146f4ef73e9525041de3c657feb2b69689d6e7aac3b248388e43965062a235
+static/media/slick.29518378.woff,1629572121589,fa7f9b78472ea626c47416d73657b92922ffce922767a9fdca149292d7eaeaf0
+static/media/slick.c94f7671.ttf,1629572121590,2b2567cc103eb4aeb14648aaa15fcd8363d375bbc1c4e7b5f036c187088805a2
+images/viewers-starwars.png,1629572099843,82589099d38214d31a6dfa418a7a93495f65d117b9312ef2b89b836e5206fdd9
+static/js/main.3dba47a0.chunk.js.map,1629572121589,7cd18be13b84144d66d78d7a32bb498ae1b77d54562f0657ca7c4f5615db385a
+static/media/slick.a4e97f5a.eot,1629572121580,dc31d29e9ef5bdc1431085372877e0506db7654d9706b8a31103838650ee708c
+images/slider-badging.jpeg,1629572099841,970b327149024dd9557eb2cf3585946cce9bf4d0762289cd1d045bbe62234a97
+images/slider-scales.jpeg,1629572099842,030f0693f1e178e336ee007f6432a66b874f54cda9f899278cd1d53494ec4bc7
+images/slider-badag.jpeg,1629572099841,0c49ace224db7ca1a5cb9d43eff6b8e42fcc6e058c157cd8359e2af69c8e588b
+images/slider-scale.jpeg,1629572099842,636c74c938bbaaae497685eb2397d84f0e1b7b4012951b17dcda3d0c215a2f58
+images/home-background.png,1629572099837,5420b4357d4ae6f3865866c44c4b687d5885e01bf5c681d5f7a51a480ea97261
+videos/1564674844-disney.mp4,1629572099846,afbbe2513c4180fee5d86b8b3077d852ed18df147b741de67fb60982db80ddae
+videos/1564676115-marvel.mp4,1629572099848,2826f8bbfd554320d198a9f578ea559b51937e5372d5aecd54a275df084f3f02
+videos/1564676714-pixar.mp4,1629572099853,3111a88336ea53cac8aa95e05421861f12b3ea4e9a8f173c521c26ae943b2baf
+images/login-background.jpeg,1629572099839,b27bc12f986972a58eac579c3470df8461c9205082301c3bae44585912808daf
+videos/1608229455-star-wars.mp4,1629572099855,5b28b6e9a90bb9c1f7151c379af3865c0072726b01fbe53179b41995ec74d860
+static/js/2.5bd2d408.chunk.js,1629572121589,840119e4fdb98f573997887958351dcda75dfac057f1e1d8c07691be5daa404b
+videos/1564676296-national-geographic.mp4,1629572099851,f20a023d362bb155d89bd3e7ce87ee420b9c687c87e79753e30a02ef1c18a2a3
+static/js/2.5bd2d408.chunk.js.map,1629572121590,7e9cf85eaddd2a6e2ffc5421da4683e14d767dbc9386126ab127190088ca4618

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "disney-plus-clone-v1"
+  }
+}

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/App.js

@@ -1,5 +1,6 @@
 import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
 import "./App.css";
+import Detail from "./components/Detail";
 import Header from "./components/Header";
 import Home from "./components/Home";
 import Login from "./components/Login";
@@ -16,6 +17,9 @@ function App() {
           <Route path="/home">
             <Home />
           </Route>
+          <Route path="/detail/:id">
+            <Detail />
+          </Route>
         </Switch>
       </Router>
     </div>

src/components/Detail.js

@@ -0,0 +1,221 @@
+import styled from "styled-components";
+import { useParams } from "react-router";
+import { useEffect, useState } from "react";
+import db from "../firebase";
+
+const Detail = (props) => {
+  const { id } = useParams();
+  const [detailData, setDetailData] = useState({});
+
+  useEffect(() => {
+    db.collection("movies")
+      .doc(id)
+      .get()
+      .then((doc) => {
+        if (doc.exists) {
+          setDetailData(doc.data());
+        } else {
+          console.log("no such document in firebase ");
+        }
+      })
+      .catch((error) => {
+        console.log("error getting document:", error);
+      });
+  }, [id]);
+
+  return (
+    <Container>
+      <Background>
+        <img src={detailData.backgroundImg} alt={detailData.title} />
+      </Background>
+
+      <ImageTitle>
+        <img src={detailData.titleImg} alt={detailData.title} />
+      </ImageTitle>
+      <ContentMeta>
+        <Controls>
+          <Player>
+            <img src="/images/play-icon-black.png" alt="" />
+            <span>Play</span>
+          </Player>
+          <Trailer>
+            <img src="/images/play-icon-white.png" alt="" />
+            <span>Trailer</span>
+          </Trailer>
+          <AddList>
+            <span />
+            <span />
+          </AddList>
+          <GroupWatch>
+            <div>
+              <img src="/images/group-icon.png" alt="" />
+            </div>
+          </GroupWatch>
+        </Controls>
+        <SubTitle>{detailData.subTitle}</SubTitle>
+        <Description>{detailData.description}</Description>
+      </ContentMeta>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: relative;
+  min-height: calc(100vh-250px);
+  overflow-x: hidden;
+  display: block;
+  top: 72px;
+  padding: 0 calc(3.5vw + 5px);
+`;
+
+const Background = styled.div`
+  left: 0px;
+  opacity: 0.8;
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  z-index: -1;
+  img {
+    width: 100vw;
+    height: 100vh;
+    @media (max-width: 768px) {
+      width: initial;
+    }
+  }
+`;
+
+const ImageTitle = styled.div`
+  align-items: flex-end;
+  display: flex;
+  -webkit-box-pack: start;
+  justify-content: flex-start;
+  margin: 0px auto;
+  height: 30vw;
+  min-height: 170px;
+  padding-bottom: 24px;
+  width: 100%;
+  img {
+    max-width: 600px;
+    min-width: 200px;
+    width: 35vw;
+  }
+`;
+
+const ContentMeta = styled.div`
+  max-width: 874px;
+`;
+
+const Controls = styled.div`
+  align-items: center;
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 24px 0px;
+  min-height: 56px;
+`;
+
+const Player = styled.button`
+  font-size: 15px;
+  margin: 0px 22px 0px 0px;
+  padding: 0px 24px;
+  height: 56px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  letter-spacing: 1.8px;
+  text-align: center;
+  text-transform: uppercase;
+  background: rgb (249, 249, 249);
+  border: none;
+  color: rgb(0, 0, 0);
+  img {
+    width: 32px;
+  }
+  &:hover {
+    background: rgb(198, 198, 198);
+  }
+  @media (max-width: 768px) {
+    height: 45px;
+    padding: 0px 12px;
+    font-size: 12px;
+    margin: 0px 10px 0px 0px;
+    img {
+      width: 25px;
+    }
+  }
+`;
+
+const Trailer = styled(Player)`
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgb(249, 249, 249);
+  color: rgb(249, 249, 249);
+`;
+
+const AddList = styled.div`
+  margin-right: 16px;
+  height: 44px;
+  width: 44px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  border: 2px solid white;
+  cursor: pointer;
+  span {
+    background-color: rgb(249, 249, 249);
+    display: inline-block;
+    &:first-child {
+      height: 2px;
+      transform: translate(1px, 0px) rotate(0deg);
+      width: 16px;
+    }
+    &:nth-child(2) {
+      height: 16px;
+      transform: translateX(-8px) rotate(0deg);
+      width: 2px;
+    }
+  }
+`;
+
+const GroupWatch = styled.div`
+  height: 44px;
+  width: 44px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: white;
+  div {
+    height: 40px;
+    width: 40px;
+    background: rgb(0, 0, 0);
+    border-radius: 50%;
+    img {
+      width: 100%;
+    }
+  }
+`;
+
+const SubTitle = styled.div`
+  color: rgb(249, 249, 249);
+  font-size: 15px;
+  min-height: 20px;
+  @media (max-width: 768px) {
+    font-size: 12px;
+  }
+`;
+
+const Description = styled.div`
+  line-height: 1.4;
+  font-size: 20px;
+  padding: 16px 0px;
+  color: rgb(249, 249, 249);
+  @media (max-width: 768px) {
+    font-size: 14px;
+  }
+`;
+
+export default Detail;