import React, { useEffect, useState } from 'react' import { useRouter } from 'next/router' import Head from 'next/head' import useSWR from 'swr' import { BsFillLightbulbFill } from 'react-icons/bs' import { useTheme } from 'next-themes' const servers_ = [ { servername: 'Vidsrc.to', link: 'https://vidsrc.to/embed/movie/', }, { servername: 'Vidsrc.me', link: 'https://vidsrc.me/embed/movie?', }, { servername: 'Moviesapi.club', link: 'https://moviesapi.club/movie/', }, { servername: 'Blackvid', link: 'https://blackvid.space/embed?tmdb=', }, ] const fetcher = (...args) => fetch(...args).then(res => res.json()) const Movies = () => { const router = useRouter() const { id, tmdb } = router.query const me = tmdb ? `tmdb=${tmdb}` : `imdb=${id}` const { theme } = useTheme() const to = tmdb ? `${tmdb}` : `${id}` const [lightStatus, switchLight] = useState(false) const [videoServer, setVideoServer] = useState('vidsrc.to') const { data } = useSWR(`/api/movie/${id}`, fetcher) useEffect(() => { if (localStorage.getItem('userWatched')) { let data = JSON.parse(localStorage.getItem('userWatched')) let moviePresent = false for (let i in data.movies) { if (id) if (data.movies[i] === id) { moviePresent = true } else { if (data.movies === tmdb) { moviePresent = true } } } if (id || tmdb) { if (!moviePresent) { if (id) data.movies.push(id) else data.movies.push(tmdb) localStorage.setItem('userWatched', JSON.stringify(data)) } } } else { if (id || tmdb) localStorage.setItem( 'userWatched', JSON.stringify({ movies: [id ? id : tmdb], tv: [], }) ) } }, [id, tmdb]) useEffect(() => { document.addEventListener('mousedown', event => { if ( event.target !== 'iframe' && event.target.tagName.toLowerCase() !== 'span' ) { switchLight(false) } }) }, []) return ( <> Play Movies | Yaps
{data ? data.imdb.imdb.name : ''}
switchLight(!lightStatus)} className={ 'flex flex-row items-center gap-1 transition duration-300 ease-in-out hover:cursor-pointer hover:text-orange-500' }> Light
{`You are watching `}
{data ? data.imdb.imdb.name : ''}
{' '} If current server doesn't work please try other servers beside.
{servers_.map((server, index) => { return (
{ if (server.servername === 'Vidsrc.me') setVideoServer(server.link + me) else if (server.servername === 'Vidsrc.to') setVideoServer(server.link + to) else setVideoServer( server.link + data?.imdb.imdb.tmdb_id ) }} className={` ${ videoServer.includes(server.servername.toLowerCase()) ? ' bg-app-greyish-blue text-white ' : '' } h-12 w-max rounded p-4 pt-3 text-center transition duration-300 ease-in-out hover:scale-110 hover:cursor-pointer hover:bg-app-greyish-blue hover:text-white dark:text-white`} key={index}> {server.servername}
) })}
) } export default Movies