diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
new file mode 100644
index 0000000..9f3b4b1
--- /dev/null
+++ b/.firebase/hosting.YnVpbGQ.cache
@@ -0,0 +1,45 @@
+404.html,1697974907858,daa499dd96d8229e73235345702ba32f0793f0c8e5c0d30e40e37a5872be57aa
+index.html,1697974409422,570c5be829c02035d3b3fff97bc741f10fb89c6d1bd60212373f721e24115067
+asset-manifest.json,1697974409423,908aafbfd470ca997844897804252ce2546e003974676800d1a9fea5b7136d93
+manifest.json,1697560600017,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+robots.txt,1697560601425,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+favicon.ico,1697560597901,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9
+images/group-icon.png,1697973506326,1798cb8ad7edb1138131e47b6817f65c4a55627cbaeaa979afad659d15abfd19
+logo192.png,1697560600952,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
+logo512.png,1697560601084,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+images/home-icon.svg,1697563366214,f5b4007dff7c18edadc6cc773b20f2bcec6242604045d944199758aefc086285
+images/cta-logo-one.svg,1697562875938,66ce22e859b8bde4fa8aaf450f855529f02864f8bbbb9212ed40f8217a8ca747
+images/cta-logo-two.png,1697562882375,b9b285d313e3f7f912d2798bff9aaa746e77869160f3342d72ed338b84c5a20a
+images/play-icon-black.png,1697973526631,c3387af7b93ec8277ec5b9a55f56bd7abc2c20094b6e566077715c8d8a38392a
+images/movie-icon.svg,1697563425269,d1ab665dd306e65aa4e62f85d2a13cd9f8da4d91b746059b62b6e0b88465789f
+images/original-icon.svg,1697563406078,f7343ba4e23979b11ede53671b5c9a97d519b60836bac82e872a497faf603c09
+images/play-icon-white.png,1697973532527,0229cddaba90d2c69898d6198ebfca134a73cb48da68c221117c979e870f22ee
+images/series-icon.svg,1697563418132,649c2bdfca076bcb9bf6eede2b5a7a865a2058e8ce224678f8df731cbcbe5429
+images/search-icon.svg,1697563383207,922033f1f347cb14781c1f1802e1975475f4f677112e5b81023a4d46e103e57d
+images/logo.svg,1697563232414,e25daeaa18d66d4fb7fa4d5d8ddcdad6998f7857f053f3215988eecfd5c8e84d
+images/viewers-disney.png,1697891659510,aa5eff06f089b2e52225238c5560eb935d31c6f244c6ff7ceb7de46215e72d26
+images/watchlist-icon.svg,1697563396257,92c817ceaea1aa0ec269065f22bc34c0ddc395d99b706a59db7cbf92cfb2a9f7
+images/viewers-marvel.png,1697891666474,94bddd6c074238483a891a5c0e69fcadd2aa6781b0332f022859fe67ba90ff31
+static/css/main.5d23abb1.css,1697974409435,adf97e4589f419331391874bc4c93e0629801d3cc9231dcd6abef6a906597e26
+images/viewers-pixar.png,1697891678242,cffb46dc9cdd4051ede17067e0571381053fce7c0bd3851ba3c5acc2f04b7bc3
+images/viewers-national.png,1697891697038,fcbbb9883766d4d49beaf561d20d5743fbe1351bb18a35db54e042b5c16ddcf5
+static/css/main.5d23abb1.css.map,1697974409434,b1eefa8147ae014262e7bf2b692161528032a1790b9f9c9f2b302d4a35a41336
+static/js/main.bd4305fc.js.LICENSE.txt,1697974409435,a671786eda4bb7418d3d0723a52990705866935758db1892b6e218721d68378b
+static/media/slick.2630a3e3eab21c607e21.svg,1697974409434,d00477d40ed40fa1dd3bdee27d9286804121b15fea83bae7d5415d902b055de0
+static/media/slick.295183786cd8a1389865.woff,1697974409434,029a727c9e1081d2f9e1015f02f18da88f268512ea4f58589a6f17f532928530
+static/media/slick.a4e97f5a2a64f0ab1323.eot,1697974409435,52b9a169969e053d43df6bd21c4dc789c2518d99afd8590a17ef50cd24c77cf6
+static/media/slick.c94f7671dcc99dce43e2.ttf,1697974409434,6aad751007cf9a89350af287f824ab64f096c472c7c9c679fb3d55b6174fc004
+images/viewers-starwars.png,1697891690782,aeb6d50178afdf24e6e6728f75040865ab6442290e0afa7c0c2c4617bb41fc16
+images/slider-badging.jpg,1697891433720,bf442e7f764a86daa6fb6d14140d9afe7cda865d75bbb1c2fad8c2988a4c82dc
+images/slider-scales.jpg,1697891469825,9371d8e5eb2a6107c91977877930553dce149a29e7b80462296f419a047015a9
+images/slider-badag.jpg,1697891462425,96a8ca6da0fecf5f8a0720dd762f44a67ec7d7cd6b5f104cb3055d88e4d7128d
+images/slider-scale.jpg,1697891447195,db3022ddc406882b1ff329bb6d3578f70b3393115d9fbf6695361e001e290fcd
+images/home-background.png,1697890882001,da30f5f71771e53a6c4a9b7b230cd5e53170f51f18454482442e6b8f9b941bca
+videos/1564676115-marvel.mp4,1697891765297,07e87ef642059ba8e7f3dd827b3fad2c2fd69d10ce3c1bf68c57d964180c1c86
+videos/1564674844-disney.mp4,1697891753152,b75349f41e10181823c43a00643e114d9f54d1b6a610fba093ea2fc4a6f0cbda
+videos/1564676714-pixar.mp4,1697891778466,bfd93694d25b61726ad8ac0a81c79fc69ad0f25284363d370668d7246f291e20
+images/login-background.jpg,1697562299912,bbfc903274847c5dc1100ec0ed045c3d953866bd6680b0651f9925413c2fe83c
+videos/1608229455-star-wars.mp4,1697891787060,b85f3e4140753c833e8d470f60c2d2fb0c83528d903f6ccd1e040df0514117e4
+static/js/main.bd4305fc.js,1697974409435,2d27575562a2d8bdb056a66f740cdaf243f152c945839a36e9c3f9c5e8e82859
+videos/1564676296-national-geographic.mp4,1697891772144,aa332a3912f9f579500863a8e7d63914d233b5def54eff2085374fb4060cc844
+static/js/main.bd4305fc.js.map,1697974409437,1cb5ac044aa6c2e0ab2377b5afaa4480af1bb66bd84ed5de80f1ea0c0dcb6ad4
diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 0000000..9157ce7
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+ "projects": {
+ "default": "magic-world-12f4f"
+ }
+}
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 0000000..f475554
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,10 @@
+{
+ "hosting": {
+ "public": "build",
+ "ignore": [
+ "firebase.json",
+ "**/.*",
+ "**/node_modules/**"
+ ]
+ }
+}
diff --git a/public/images/group-icon.png b/public/images/group-icon.png
new file mode 100644
index 0000000..87116b3
Binary files /dev/null and b/public/images/group-icon.png differ
diff --git a/public/images/play-icon-black.png b/public/images/play-icon-black.png
new file mode 100644
index 0000000..bf533de
Binary files /dev/null and b/public/images/play-icon-black.png differ
diff --git a/public/images/play-icon-white.png b/public/images/play-icon-white.png
new file mode 100644
index 0000000..1ed4a83
Binary files /dev/null and b/public/images/play-icon-white.png differ
diff --git a/public/index.html b/public/index.html
index aa069f2..1faa911 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,43 +1,89 @@
-
+
- React App
+
+
+
- You need to enable JavaScript to run this app.
-
-
+ try {
+ let app = firebase.app();
+ let features = [
+ 'auth',
+ 'database',
+ 'firestore',
+ 'functions',
+ 'messaging',
+ 'storage',
+ 'analytics',
+ 'remoteConfig',
+ 'performance',
+ ].filter(feature => typeof app[feature] === 'function');
+ loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
+ } catch (e) {
+ console.error(e);
+ loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
+ }
+ });
+
diff --git a/src/App.js b/src/App.js
index 69143c5..793c8cc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from './components/Login';
import Header from './components/Header';
import Home from './components/Home';
+import Detail from "./components/Detail";
function App() {
return (
@@ -12,6 +13,7 @@ function App() {
diff --git a/src/components/Detail.js b/src/components/Detail.js
new file mode 100644
index 0000000..472fb5c
--- /dev/null
+++ b/src/components/Detail.js
@@ -0,0 +1,235 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+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 (
+
+
+
+
+
+
+
+
+
+ Play
+
+
+ Trailer
+
+
+
+
+
+
+
+
+ {detailData.subTitle}
+ {detailData.description}
+
+
+ );
+};
+
+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;
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
index 2d6a132..ea3c5e2 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,20 +1,58 @@
-import React from 'react'
-import styled from 'styled-components';
-import ImgSlider from './ImgSlider';
-import Viewers from './Viewers';
-import Recommends from './Recommends';
-import NewDisney from './NewDisney';
-import Originals from './Originals';
-import Trending from './Trending';
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import db from '../firebase'
-import { setMovies } from '../features/movie/movieSlice'
-import { selectUserName } from '../features/user/userSlice';
-
-function Home() {
+import styled from "styled-components";
+import ImgSlider from "./ImgSlider";
+import NewDisney from "./NewDisney";
+import Originals from "./Originals";
+import Recommends from "./Recommends";
+import Trending from "./Trending";
+import Viewers from "./Viewers";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import db from "../firebase";
+import { setMovies } from "../features/movie/movieSlice";
+import { selectUserName } from "../features/user/userSlice";
+
+const Home = (props) => {
const dispatch = useDispatch();
const userName = useSelector(selectUserName);
+ let recommends = [];
+ let newDisneys = [];
+ let originals = [];
+ let trending = [];
+
+ useEffect(() => {
+ console.log("hello");
+ db.collection("movies").onSnapshot((snapshot) => {
+ snapshot.docs.map((doc) => {
+ console.log(recommends);
+ switch (doc.data().type) {
+ case "recommend":
+ recommends = [...recommends, { id: doc.id, ...doc.data() }];
+ break;
+
+ case "new":
+ newDisneys = [...newDisneys, { id: doc.id, ...doc.data() }];
+ break;
+
+ case "original":
+ originals = [...originals, { id: doc.id, ...doc.data() }];
+ break;
+
+ case "trending":
+ trending = [...trending, { id: doc.id, ...doc.data() }];
+ break;
+ }
+ });
+
+ dispatch(
+ setMovies({
+ recommend: recommends,
+ newDisney: newDisneys,
+ original: originals,
+ trending: trending,
+ })
+ );
+ });
+ }, [userName]);
return (
@@ -25,8 +63,8 @@ function Home() {
- )
-}
+ );
+};
const Container = styled.main`
position: relative;
@@ -47,4 +85,4 @@ const Container = styled.main`
}
`;
-export default Home
+export default Home;
\ No newline at end of file
diff --git a/src/components/ImgSlider.js b/src/components/ImgSlider.js
index 85599a6..8281ff5 100644
--- a/src/components/ImgSlider.js
+++ b/src/components/ImgSlider.js
@@ -5,42 +5,42 @@ import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
function ImgSlider() {
- let settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- autoplay: true,
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
+ let settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ autoplay: true,
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
}
const Carousel = styled(Slider)`
diff --git a/src/components/Login.js b/src/components/Login.js
index 78bfd25..37504b8 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -2,25 +2,25 @@ import React from 'react'
import styled from 'styled-components';
function Login() {
- return (
-
-
-
-
- GET ALL THERE
-
- Get Premier Access to Raya and the Last Dragon for an additional fee
- with a Disney+ subscription. As of 03/26/21, the price of Disney+
- and The Disney Bundle will increase by $1.
-
-
-
-
-
- )
+ return (
+
+
+
+
+ GET ALL THERE
+
+ Get Premier Access to Raya and the Last Dragon for an additional fee
+ with a Disney+ subscription. As of 03/26/21, the price of Disney+
+ and The Disney Bundle will increase by $1.
+
+
+
+
+
+ )
}
const Container = styled.section`
diff --git a/src/components/NewDisney.js b/src/components/NewDisney.js
index 95ec621..e517c7b 100644
--- a/src/components/NewDisney.js
+++ b/src/components/NewDisney.js
@@ -1,39 +1,29 @@
import React from 'react'
import { Link } from "react-router-dom";
import styled from "styled-components";
+import { useSelector } from "react-redux";
+import { selectNewDisney } from "../features/movie/movieSlice";
function NewDisney() {
- return (
-
- New to Disney +
-
-
-
-
-
-
-
-
-
-
- )
-}
+ const movies = useSelector(selectNewDisney);
+ return (
+
+ New to Disney+
+
+ {movies &&
+ movies.map((movie, key) => (
+
+ {movie.id}
+
+ ))}
+
+
+ );
+};
const Container = styled.div`
padding: 0 0 26px;
diff --git a/src/components/Originals.js b/src/components/Originals.js
index 0e308ac..00bdeeb 100644
--- a/src/components/Originals.js
+++ b/src/components/Originals.js
@@ -1,36 +1,26 @@
import styled from "styled-components";
import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { selectOriginal } from "../features/movie/movieSlice";
const Originals = (props) => {
- return (
-
- Recommended for You
-
-
-
-
-
-
-
-
-
-
- );
+ const movies = useSelector(selectOriginal);
+ return (
+
+ Originals
+
+ {movies &&
+ movies.map((movie, key) => (
+
+ {movie.id}
+
+ ))}
+
+
+ );
};
const Container = styled.div`
diff --git a/src/components/Recommends.js b/src/components/Recommends.js
index 31467cd..2b988aa 100644
--- a/src/components/Recommends.js
+++ b/src/components/Recommends.js
@@ -1,38 +1,26 @@
import styled from "styled-components";
import { Link } from "react-router-dom";
-// import { useSelector } from "react-redux";
-// import { selectRecommend } from "../features/movie/movieSlice";
+import { useSelector } from "react-redux";
+import { selectRecommend } from "../features/movie/movieSlice";
const Recommends = (props) => {
- return (
-
- Recommended for You
-
-
-
-
-
-
-
-
-
-
- );
+ const movies = useSelector(selectRecommend);
+ return (
+
+ Recommended for You
+
+ {movies &&
+ movies.map((movie, key) => (
+
+ {movie.id}
+
+ ))}
+
+
+ );
};
const Container = styled.div`
diff --git a/src/components/Trending.js b/src/components/Trending.js
index 79ebd0b..dc658be 100644
--- a/src/components/Trending.js
+++ b/src/components/Trending.js
@@ -1,36 +1,26 @@
import styled from "styled-components";
import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { selectTrending } from "../features/movie/movieSlice";
const Trending = (props) => {
- return (
-
- Recommended for You
-
-
-
-
-
-
-
-
-
-
- );
+ const movies = useSelector(selectTrending);
+ return (
+
+ Trending
+
+ {movies &&
+ movies.map((movie, key) => (
+
+ {movie.id}
+
+ ))}
+
+
+ );
};
const Container = styled.div`
diff --git a/src/components/Viewers.js b/src/components/Viewers.js
index bda48a3..637a60d 100644
--- a/src/components/Viewers.js
+++ b/src/components/Viewers.js
@@ -2,43 +2,43 @@ import React from 'react'
import styled from "styled-components";
function Viewers() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
}
const Container = styled.div`
diff --git a/src/features/movie/movieSlice.js b/src/features/movie/movieSlice.js
index 078cb6b..c7a37fc 100644
--- a/src/features/movie/movieSlice.js
+++ b/src/features/movie/movieSlice.js
@@ -27,4 +27,4 @@ export const selectNewDisney = (state) => state.movie.newDisney;
export const selectOriginal = (state) => state.movie.original;
export const selectTrending = (state) => state.movie.trending;
-export default movieSlice.movieReducer;
\ No newline at end of file
+export default movieSlice.reducer;
\ No newline at end of file
+ Play
+ 
+ Trailer
+ 
+ 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
-