1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
'use client'
import { link } from 'fs'
import Link from 'next/link'
import { BellIcon, MagnifyingGlassIcon, PlayIcon, ArrowSmallDownIcon} from '@heroicons/react/24/solid'
import { InformationCircleIcon} from '@heroicons/react/24/outline'
import { useEffect, useState, useContext } from 'react'
import requests from '../../services/requests'
import Image from "next/image"
import PreviewCard from '../components/PreviewCard'
import Modal from '../components/Modal'
import { auth } from '../../services/firebase';
import { useRouter } from 'next/navigation';
import { signOut } from 'firebase/auth';
import { AuthContext } from '../components/AuthContext'
// import NetflixLogo from '../../../public/images/netflix_logo.svg'
const baseURL ='https://api.themoviedb.org/3'
const imageURL = 'https://image.tmdb.org/t/p/original'
const Home = () => {
const router = useRouter();
const [heroMovie, setHeroMovie] = useState()
const [trendingMovies, setTrendingMovies] = useState()
const [trendingTv, setTrendingTv] = useState()
const [modalVisible, setModalVisible] = useState(false)
const [modalContent, setModalContent] = useState()
const user = useContext(AuthContext);
useEffect(() => {
// Check if user is authenticated
if (!user) {
// Redirect or perform any necessary action
router.push('/login');
} else {
// User is authenticated, continue with desired logic
}
}, [user]);
useEffect(() => {
const user = auth.currentUser;
if (!user) {
// User is not signed in, redirect to the login page
router.push('/login');
}
}, []);
const logoutUser = () => {
signOut(auth)
.then(() => {
console.log('User signed Out!');
// Navigate to the home screen or other desired screen
router.push('/login');
})
.catch(error => {
console.error(error);
// Display an error message to the user
});
}
useEffect(() => {
fetch(`${baseURL}${requests.fetchTopRated}`).then(res => res.json()).then((data) => {
setHeroMovie(data.results[0]);
console.log('toprated');
console.log(data.results[0]);
console.log(imageURL);
console.log(heroMovie?.backdrop_path);
})
}, [])
useEffect(() => {
fetch(`${baseURL}${requests.fetchTrendingMovies}`).then(res => res.json()).then((data) => {
setTrendingMovies(data.results)
console.log(data.results)
})
}, [])
useEffect(() => {
fetch(`${baseURL}${requests.fetchTrendingTv}`).then(res => res.json()).then((data) => {
setTrendingTv(data.results)
})
}, [])
return (
<div className="flex flex-col text-white justify-between gap-10 h-screen">
<header className='flex justify-between pt-3 px-8 z-10 text-xs'>
<div className='flex items-center gap-4'>
<img className='scale-[65%] mr-4' src="../images/netflix_logo.svg" alt="SVG image"/>
<a className='text-white font-bold'>Home</a>
<a className='text-white'>TV Shows</a>
<a className='text-white'>Movies</a>
<a className='text-white'>News & Popular</a>
<a className='text-white'>My List</a>
<a className='text-white'>Browse by Language</a>
</div>
<div className='flex items-center gap-4'>
<MagnifyingGlassIcon className='h-4 w-4'/>
<a className='text-white'>Kids</a>
<BellIcon className='h-4 w-4'/>
<div className='h-8 w-8'>
<Link href='../' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
<img src='https://api.dicebear.com/9.x/adventurer/svg?seed=alberto' alt="User Avatar"/>
</Link>
</div>
<ArrowSmallDownIcon className='h-4 w-4 cursor-pointer' onClick={logoutUser}/>
</div>
</header>
<section className='w-1/3 ml-10'>
<div className='flex items-center'>
<img className='scale-[65%] mr-5' src="../images/N.svg" alt="SVG image"/>
<h1 className='text-sm font-mono tracking-[.4rem]'>MOVIES</h1>
</div>
<div className='h-fit text-[3rem]'>
{heroMovie?.original_title}
</div>
<div className='flex items-center'>
<img className='scale-[45%]' src="../images/Top10.svg" alt="SVG image"/>
<h2 className='font-bold'>#1 in TV Shows Today</h2>
</div>
<div>
<p className=' text-sm break-words text-justify'>
{heroMovie?.overview}
</p>
</div>
<div className='flex gap-4 mt-4'>
<button className='flex items-center p-4 h-10 bg-white text-black text-xl justify-center font-semibold rounded hover:outline outline-offset-4 outline-4 outline-white'>
<PlayIcon className='h-6 w-6 mr-2'/>Play
</button>
<button className='flex items-center p-4 h-10 bg-gray-700/80 justify-center rounded hover:outline outline-offset-4 outline-4'>
<InformationCircleIcon className='h-6 w-6 mr-2'/>More Info
</button>
</div>
</section>
<section className=' ml-10 mb-10 z-10'>
<h2>Popular on Netflix</h2>
<div className='flex flex-row gap-3 overflow-x-auto mt-4 items-center p-6 pl-10 -ml-10'>
{
trendingMovies?.map((movie, index) => (
<PreviewCard key={index} movie={movie} setModalContentId={setModalContent} setModalVisible={setModalVisible}/>
))}
</div>
</section>
<section className=' ml-10 mb-10 z-10'>
<h2>Tv Shows</h2>
<div className='flex flex-row gap-3 overflow-x-auto mt-4 items-center p-5 pl-10 -ml-10'>
{
trendingTv?.map((movie, index) => (
<PreviewCard key={index} movie={movie} setModalContentId={setModalContent} setModalVisible={setModalVisible}/>
))}
</div>
</section>
<Modal modalContent={modalContent} setModalVisible={setModalVisible} modalVisible={modalVisible}/>
<div className='absolute h-full w-full bg-contain bg-right -z-20 bg-no-repeat' style={{backgroundImage: `url(${imageURL}${heroMovie?.backdrop_path})`}}></div>
<div className='absolute w-full h-32 -z-10 bg-gradient-to-b from-black'></div>
<div className='absolute bottom-0 w-full h-20 -z-10 bg-gradient-to-t from-black'></div>
<div className='absolute w-2/3 h-full -z-10 bg-gradient-to-r from-black'></div>
</div>
)
}
export default Home;
|
