blob: dd2e850522f77d36574eaad3c3a41b53d8ba6795 (
plain)
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
|
import { useEffect, useState } from 'react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import Genre from './Genre'
const baseURL = 'https://api.themoviedb.org/3'
const API_KEY = '8216fbb9997cd81a67471e6cb5a6f2df'
const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => {
const [content, setContent] = useState()
const [video, setVideo] = useState()
const [similarMovies, setSimilarMovies] = useState()
useEffect(() => {
fetch(`${baseURL}/movie/${modalContent?.id}/similar?api_key=${API_KEY}`).then(res => res.json()).then((data) => {
setSimilarMovies(data.results)
})
}, [modalContent])
useEffect(() => {
if (modalContent) {
console.log(baseURL);
console.log(modalContent.media_type);
console.log(modalContent.id);
fetch(`${baseURL}/${modalContent.media_type}/${modalContent.id}/videos?api_key=${API_KEY}`)
.then((res) => res.json())
.then((data) => {
console.log('VIDEOS DATA', data.results[0].key)
setVideo(data.results[0].key)
})
}
}, [modalContent])
return (
<div
className={`backdrop-blur-[2px] fixed inset-0 z-50 bg-black/40 flex items-center justify-center ${modalVisible ? '' : 'hidden'
}`} onClick={(e) => e.target === e.currentTarget && setModalVisible(false)}
>
<div className="flex flex-col bg-transparent shadow-2xl rounded-xl z-100">
{modalVisible && (
<iframe
className={'w-full bg-black'}
width="420"
height="315"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
src={`https://www.youtube.com/embed/${video}?autoplay=1`}
></iframe>
)}
<div className={'px-8 py-4 w-[600px] bg-gray-800'}>
<Genre id={modalContent?.id} />
<h3 className={'text-xl'}>{modalContent?.original_name}{modalContent?.original_title}</h3>
<p className='w-full break-words h-[70px] overflow-y-auto'>{modalContent?.overview}</p>
<hr className='my-4'/>
<div className='relative'>
<div className="absolute left-0 top-0 bottom-0 w-16 z-50 pointer-events-none bg-gradient-to-r from-gray-800"></div>
<div className="absolute right-0 top-0 bottom-0 w-16 z-50 pointer-events-none bg-gradient-to-l from-gray-800"></div>
<div className='flex flex-row overflow-x-auto gap-8 relative'>
{
similarMovies?.map((movie, index) => (
<div
className={`
shrink-0 bg-contain bg-no-repeat w-[150px] h-[112px] bg-center z-40 ${movie?.backdrop_path === null ? 'hidden' : '' }
`}
style={{
backgroundImage: `url(https://image.tmdb.org/t/p/original${movie?.backdrop_path})`,
}}
></div>
))}
</div>
</div>
</div>
</div>
</div>
)
}
export default Modal
|
