MattTheTekie/secret
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

language switch done

Browse source
This commit is contained in:
p 2023-10-29 23:22:16 +05:30
commit 0c701f8622
8 changed files with 652 additions and 488 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.idea/.gitignore generated vendored
View file

@ -1,5 +0,0 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

6
.idea/jsLibraryMappings.xml generated
View file

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{font-awesome}" />
</component>
</project>

8
.idea/modules.xml generated
View file

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/yaps.iml" filepath="$PROJECT_DIR$/.idea/yaps.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated
View file

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

13
.idea/yaps.iml generated
View file

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="font-awesome" level="application" />
</component>
</module>

1
.vscode/settings.json vendored
View file

@ -1 +0,0 @@
{}

277
pages/play/movies.js
View file

@ -1,120 +1,177 @@
import React, {useEffect, useState} from 'react'
import {useRouter} from 'next/router';
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";
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 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
}
}
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: []
}))
}
}
if (id || tmdb) {
if (!moviePresent) {
if (id) data.movies.push(id)
else data.movies.push(tmdb)
localStorage.setItem('userWatched', JSON.stringify(data))
}
}, [id, tmdb]);
useEffect(() => {
document.addEventListener("mousedown", (event) => {
if (event.target !== "iframe") {
switchLight(false)
}
} 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 (
<>
<Head>
<title>Play Movies | Yaps</title>
</Head>
<div
className={` left-0 top-0 z-[997] bg-black transition duration-300 ease-in-out ${
lightStatus
? 'opacity-0.5 fixed h-screen w-full '
: 'h-0 w-0 opacity-0'
}`}></div>
<div className={'text-4xl'}>{data ? data.imdb.imdb.name : ''}</div>
<div className={`w-full ${lightStatus ? '' : 'h-full'} z-[999] `}>
<div className={` flex h-full w-full flex-col`}>
<iframe
src={
videoServer !== 'vidsrc.to' ? videoServer : servers_[0].link + to
}
})
}, [])
return (<>
<Head>
<title>Play Movies | Yaps</title>
</Head>
<div
className={` top-0 left-0 z-[997] bg-[#222222] transition duration-300 ease-in-out ${lightStatus ? 'opacity-1 fixed w-full h-screen ' : 'opacity-0 h-0 w-0'}`}>
</div>
<div className={"text-4xl"}>
{data ? data.imdb.imdb.name : ""}
</div>
<div
className={`w-full ${lightStatus ? '' : 'h-full'} z-[999] `}>
<div className={` w-full flex flex-col h-full`}>
<iframe src={videoServer !== 'vidsrc.to' ? videoServer : servers_[0].link + to}
className={`z-[998] ${lightStatus ? 'absolute left-0 lg:left-[20%] h-[80vh] lg:w-2/3 w-full ' : 'w-full h-[95vh]'}`}
allowFullScreen="allowfullscreen"></iframe>
<div
className={`${lightStatus ? 'w-1/2 absolute text-white ' : 'w-full '} p-4 pl-0 bg-transparent gap-10 z-[999] flex flex-row justify-start top-[100%] lg:top-[90%] items-center `}>
<div onClick={() => switchLight(!lightStatus)}
className={"flex flex-row gap-1 items-center hover:text-orange-500 transition duration-300 ease-in-out hover:cursor-pointer"}>
<BsFillLightbulbFill/>
<span>Light</span>
</div>
</div>
<div className={`${lightStatus ? 'hidden' : 'flex'} w-full flex justify-start items-center h-36`}>
<div className={"rounded w-full h-full flex flex-row "}>
<div
className={`${theme === 'dark' ? 'bg-app-dark-blue' : ''} p-2 h-full flex justify-center items-center flex-col text-center w-1/3`}>
{`You are watching `}
<div className={" font-bold"}>{data ? data.imdb.imdb.name : ""}</div>
<div> If current server doesn't work please try other servers beside.</div>
</div>
<div
className={`${theme === 'dark' ? 'bg-app-dark-blue' : ''} text-black w-2/3 h-full`}>
<div
className={"w-full flex flex-wrap flex-row gap-7 p-5 justify-start items-center h-10"}>
{servers_.map((server, index) => {
return (<div
onClick={() => {
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-amber-700' : ''} dark:text-white hover:scale-110 hover:cursor-pointer transition duration-300 ease-in-out rounded p-3 w-max text-center h-8`}
key={index}>
{server.servername}
</div>)
})}
</div>
</div>
</div>
</div>
className={`z-[998] ${
lightStatus
? 'absolute left-0 h-[80vh] w-full lg:left-[20%] lg:w-2/3 '
: 'h-[95vh] w-full'
}`}
allowFullScreen='allowfullscreen'></iframe>
<div
className={`${
lightStatus
? 'absolute w-1/2 text-white dark:text-black '
: 'w-full '
} top-[100%] z-[999] flex flex-row items-center justify-start gap-10 bg-transparent p-4 pl-0 lg:top-[90%] `}>
<div
onClick={() => switchLight(!lightStatus)}
className={
'flex flex-row items-center gap-1 transition duration-300 ease-in-out hover:cursor-pointer hover:text-orange-500'
}>
<BsFillLightbulbFill />
<span>Light</span>
</div>
</div>
<div
className={`${
lightStatus ? 'hidden' : 'flex'
} flex h-36 w-full items-center justify-start`}>
<div className={'flex h-full w-full flex-row rounded '}>
<div
className={`${
theme === 'dark' ? 'bg-app-dark-blue' : ''
} flex h-full w-1/3 flex-col items-center justify-center p-2 text-center`}>
{`You are watching `}
<div className={' font-bold'}>
{data ? data.imdb.imdb.name : ''}
</div>
<div>
{' '}
If current server doesn't work please try other servers
beside.
</div>
</div>
<div
className={`${
theme === 'dark' ? 'bg-app-dark-blue' : ''
} h-full w-2/3 text-black`}>
<div
className={
'flex h-10 w-full flex-row flex-wrap items-center justify-start gap-7 p-5'
}>
{servers_.map((server, index) => {
return (
<div
onClick={() => {
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}
</div>
)
})}
</div>
</div>
</div>
</div>
</div>
</>)
</div>
</>
)
}
export default Movies;
export default Movies

834
pages/play/tv.js
View file

@ -1,362 +1,508 @@
import React, {useEffect, useState} from 'react'
import {useRouter} from 'next/router';
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import Head from 'next/head'
import {AiOutlineDown, AiOutlineRight} from "react-icons/ai";
import useSWR from "swr";
import {BsFillLightbulbFill} from "react-icons/bs";
import {BiSolidSkipNextCircle, BiSolidSkipPreviousCircle} from "react-icons/bi";
import {useTheme} from "next-themes";
import { AiOutlineDown, AiOutlineRight } from 'react-icons/ai'
import useSWR from 'swr'
import { BsFillLightbulbFill } from 'react-icons/bs'
import {
BiSolidSkipNextCircle,
BiSolidSkipPreviousCircle,
} from 'react-icons/bi'
import { useTheme } from 'next-themes'
const servers_ = [{
servername: "Vidsrc.to", link: "https://vidsrc.to/embed/tv/"
}, {
servername: "Vidsrc.me", link: "https://vidsrc.me/embed/tv?",
}, {
servername: "Moviesapi.club", link: "https://moviesapi.club/tv/"
}, {
servername: "Blackvid", link: "https://blackvid.space/embed?tmdb="
}]
const fetcher = (...args) => fetch(...args).then((res) => res.json())
const servers_ = [
{
servername: 'Vidsrc.to',
link: 'https://vidsrc.to/embed/tv/',
},
{
servername: 'Vidsrc.me',
link: 'https://vidsrc.me/embed/tv?',
},
{
servername: 'Moviesapi.club',
link: 'https://moviesapi.club/tv/',
},
{
servername: 'Blackvid',
link: 'https://blackvid.space/embed?tmdb=',
},
]
const fetcher = (...args) => fetch(...args).then(res => res.json())
const Tv = () => {
const router = useRouter()
const {id, tmdb} = router.query;
const {theme, setTheme} = useTheme();
const {data} = useSWR(`/api/tv/${tmdb}`, fetcher)
const [tvDetails, setTvDetails] = useState({
episode: 1, season: 1
})
const [season, SetSeason] = useState([]);
const [episodes, setEpisodes] = useState({})
const [seasonDropDown, setSeasonDropDown] = useState(false)
const [episodeDropDown, setEpisodeDropDown] = useState(false)
const [videoServer, setVideoServer] = useState(`vidsrc.to`)
const [lightStatus, switchLight] = useState(false)
const [nextBtn, showNextBtn] = useState(true);
const [prevBtn, showPrevBtn] = useState(true);
const [nextprevbtnclicked, setnextprevbtnclicked] = useState(false)
useEffect(() => {
let temp = []
if (data)
if (data.detail.seasons[0].name.includes("Specials"))
for (let i = 1; i < data.detail.seasons.length; i++) {
temp.push(i);
}
else
for (let i = 1; i <= data.detail.seasons.length; i++) {
temp.push(i);
}
SetSeason(temp)
let episode = [];
let c = 1;
if (data) {
if (data.detail.seasons[0].name.includes("Specials")) {
for (let k = 0; k < temp.length; k++) {
for (let i = 1; i < data.detail.seasons[c].episode_count + 1; i++)
episode.push(i);
episodes[c] = episode
c++;
episode = []
}
} else {
c = 0;
for (let k = 0; k < temp.length; k++) {
for (let i = 1; i < data.detail.seasons[c].episode_count + 1; i++)
episode.push(i);
episodes[c + 1] = episode
c++;
episode = []
}
}
const router = useRouter()
const { id, tmdb } = router.query
const { theme, setTheme } = useTheme()
const { data } = useSWR(`/api/tv/${tmdb}`, fetcher)
const [tvDetails, setTvDetails] = useState({
episode: 1,
season: 1,
})
const [season, SetSeason] = useState([])
const [episodes, setEpisodes] = useState({})
const [seasonDropDown, setSeasonDropDown] = useState(false)
const [episodeDropDown, setEpisodeDropDown] = useState(false)
const [videoServer, setVideoServer] = useState(`vidsrc.to`)
const [lightStatus, switchLight] = useState(false)
const [nextBtn, showNextBtn] = useState(true)
const [prevBtn, showPrevBtn] = useState(true)
const [nextprevbtnclicked, setnextprevbtnclicked] = useState(false)
useEffect(() => {
let temp = []
if (data)
if (data.detail.seasons[0].name.includes('Specials'))
for (let i = 1; i < data.detail.seasons.length; i++) {
temp.push(i)
}
}, [seasonDropDown, episodeDropDown, nextprevbtnclicked]);
useEffect(() => {
console.log(theme)
if (localStorage.getItem("userWatched")) {
let data = JSON.parse(localStorage.getItem("userWatched"))
let tvPresent = -1
if (id || tmdb) {
for (let i in data.tv) {
if (id) {
if (data.tv[i][0] === id) {
tvPresent = i
}
} else {
if (data.tv[i][0] === tmdb) {
tvPresent = i
}
}
}
else
for (let i = 1; i <= data.detail.seasons.length; i++) {
temp.push(i)
}
SetSeason(temp)
let episode = []
let c = 1
if (data) {
if (data.detail.seasons[0].name.includes('Specials')) {
for (let k = 0; k < temp.length; k++) {
for (let i = 1; i < data.detail.seasons[c].episode_count + 1; i++)
episode.push(i)
episodes[c] = episode
c++
episode = []
}
} else {
c = 0
for (let k = 0; k < temp.length; k++) {
for (let i = 1; i < data.detail.seasons[c].episode_count + 1; i++)
episode.push(i)
episodes[c + 1] = episode
c++
episode = []
}
}
}
}, [seasonDropDown, episodeDropDown, nextprevbtnclicked])
useEffect(() => {
console.log(theme)
if (localStorage.getItem('userWatched')) {
let data = JSON.parse(localStorage.getItem('userWatched'))
let tvPresent = -1
if (id || tmdb) {
for (let i in data.tv) {
if (id) {
if (data.tv[i][0] === id) {
tvPresent = i
}
if (id || tmdb)
if (tvPresent !== -1) {
setTvDetails({season: data.tv[i][1], episode: data.tv[i][2]})
} else {
if (id || tmdb) {
if (id)
data.tv.push([id, tvDetails.season, tvDetails.episode])
else data.tv.push([tmdb, tvDetails.season, tvDetails.episode])
localStorage.setItem("userWatched", JSON.stringify(data))
}
}
} else {
if (data.tv[i][0] === tmdb) {
tvPresent = i
}
}
}
}
if (id || tmdb)
if (tvPresent !== -1) {
setTvDetails({ season: data.tv[i][1], episode: data.tv[i][2] })
} else {
if (id || tmdb)
localStorage.setItem("userWatched", JSON.stringify({
movies: [], tv: [[id ? id : tmdb, tvDetails.season, tvDetails.episode]]
}))
if (id || tmdb) {
if (id) data.tv.push([id, tvDetails.season, tvDetails.episode])
else data.tv.push([tmdb, tvDetails.season, tvDetails.episode])
localStorage.setItem('userWatched', JSON.stringify(data))
}
}
}, [id, tmdb]);
useEffect(() => {
if (data !== undefined) {
if (localStorage.getItem('userWatched')) {
let dataa = JSON.parse(localStorage.getItem("userWatched"))
let tvPresent = -1
if (id || tmdb) {
for (let i in dataa.tv) {
if (id) {
if (dataa.tv[i][0] === id) {
tvPresent = i
}
} else {
if (dataa.tv[i][0] === tmdb) {
tvPresent = i
}
} else {
if (id || tmdb)
localStorage.setItem(
'userWatched',
JSON.stringify({
movies: [],
tv: [[id ? id : tmdb, tvDetails.season, tvDetails.episode]],
})
)
}
}, [id, tmdb])
useEffect(() => {
if (data !== undefined) {
if (localStorage.getItem('userWatched')) {
let dataa = JSON.parse(localStorage.getItem('userWatched'))
let tvPresent = -1
if (id || tmdb) {
for (let i in dataa.tv) {
if (id) {
if (dataa.tv[i][0] === id) {
tvPresent = i
}
} else {
if (dataa.tv[i][0] === tmdb) {
tvPresent = i
}
}
}
}
if (id || tmdb)
if (tvPresent !== -1) {
if (id)
dataa.tv[tvPresent] = [id, tvDetails.season, tvDetails.episode]
else
dataa.tv[tvPresent] = [tmdb, tvDetails.season, tvDetails.episode]
localStorage.setItem('userWatched', JSON.stringify(dataa))
} else {
if (id || tmdb) {
if (id) dataa.tv.push([id, tvDetails.season, tvDetails.episode])
else dataa.tv.push([tmdb, tvDetails.season, tvDetails.episode])
localStorage.setItem('userWatched', JSON.stringify(dataa))
}
}
}
if (tvDetails.season === 1 && tvDetails.episode === 1) {
showPrevBtn(false)
} else {
showPrevBtn(true)
}
if (
tvDetails.season === season[season.length - 1] &&
tvDetails.episode ===
episodes[tvDetails.season][episodes[tvDetails.season].length - 1]
) {
showNextBtn(false)
} else {
showNextBtn(true)
}
let inputstrings = `${data?.detail.name}season`
let inputStringe = `${data?.detail.name}episode`
if (
localStorage.getItem(inputstrings.replace(/\s+/g, '').toLowerCase())
) {
localStorage.setItem(
inputstrings.replace(/\s+/g, '').toLowerCase(),
tvDetails.season
)
}
if (
localStorage.getItem(inputStringe.replace(/\s+/g, '').toLowerCase())
) {
localStorage.setItem(
inputStringe.replace(/\s+/g, '').toLowerCase(),
tvDetails.episode
)
}
if (videoServer.includes('vidsrc.me'))
setVideoServer(
`https://vidsrc.me/embed/tv?${
tmdb ? `tmdb=${tmdb}` : `imdb=${id}`
}&season=${tvDetails.season}&episode=${tvDetails.episode}`
)
if (videoServer.includes('vidsrc.to'))
setVideoServer(
`https://vidsrc.to/embed/tv/${tmdb ? `${tmdb}` : `${id}`}/${
tvDetails.season
}/${tvDetails.episode}`
)
else if (videoServer.includes('moviesapi.club'))
setVideoServer(
`https://moviesapi.club/tv/${tmdb}-${tvDetails.season}-${tvDetails.episode}`
)
else if (videoServer.includes('blackvid.space'))
setVideoServer(
`https://blackvid.space/embed?tmdb=${tmdb}&season=${tvDetails.season}&episode=${tvDetails.episode}`
)
}
}, [tvDetails])
console.log(data?.detail?.seasons[0].poster_path)
//adding event listener for window to catch left click to remove light setting
useEffect(() => {
document.addEventListener('mousedown', event => {
if (
event.target !== 'iframe' &&
event.target.tagName.toLowerCase() !== 'span'
) {
switchLight(false)
}
})
}, [])
return (
<>
<Head>
<title>Play Tv | Yaps</title>
</Head>
<div
className={`left-0 top-0 z-[997] w-full bg-black transition duration-300 ease-in-out ${
lightStatus ? 'opacity-1 fixed h-screen ' : 'h-0 w-0 opacity-0'
}`}></div>
<div
className={` flex w-full flex-col ${
lightStatus ? '' : 'h-full'
} z-[999] h-full`}>
{/*<img src={`${TMDB_IMAGE_ENDPOINT}/${images}`}/>*/}
<div className={'h-16 w-full pb-2 text-3xl'}>
{data?.detail.name} S{tvDetails.season} E{tvDetails.episode}
</div>
<iframe
src={
videoServer !== 'vidsrc.to'
? videoServer
: `https://vidsrc.to/embed/tv/${tmdb ? tmdb : id}/${
tvDetails.season
}/${tvDetails.episode}`
}
className={'z-50 '}
style={{ width: '100%', height: '92vh' }}
allowFullScreen='allowfullscreen'></iframe>
<div
className={
'flex w-full flex-row items-center justify-between gap-10 bg-transparent p-4 pl-0'
}>
<div>
<div
className={'relative flex w-44 items-center justify-start gap-1'}>
<div className={'relative'}>
<BiSolidSkipPreviousCircle
size={35}
onClick={() => {
setnextprevbtnclicked(true)
let current_Episode = tvDetails.episode
let current_Season = tvDetails.season
if (episodes[current_Season]) {
if (
episodes[current_Season].indexOf(current_Episode) === 0
) {
if (season.indexOf(tvDetails.season) !== 0) {
setTvDetails({
season: current_Season - 1,
episode:
episodes[current_Season - 1][
episodes[current_Season].length - 1
],
})
}
} else {
setTvDetails(prev => {
return { ...prev, episode: current_Episode - 1 }
})
}
}
}
if (id || tmdb)
if (tvPresent !== -1) {
if (id) dataa.tv[tvPresent] = [id, tvDetails.season, tvDetails.episode]
else dataa.tv[tvPresent] = [tmdb, tvDetails.season, tvDetails.episode]
localStorage.setItem("userWatched", JSON.stringify(dataa))
}}
className={`${
prevBtn ? 'block' : 'hidden'
} control-button transition duration-300 ease-in-out hover:scale-125`}
/>
<div
className={
'tooltip-div absolute left-5 z-50 hidden w-10 bg-[#222222] text-center'
}>
Prev
</div>
</div>
<div
className={'relative'}
onClick={() => {
let current_Episode = tvDetails.episode
let current_Season = tvDetails.season
setnextprevbtnclicked(true)
if (episodes[tvDetails.season]) {
if (
episodes[tvDetails.season].indexOf(current_Episode) ===
episodes[tvDetails.season].length - 1
) {
if (
season.indexOf(tvDetails.season) !==
season.length - 1
) {
setTvDetails({
season: current_Season + 1,
episode: 1,
})
}
} else {
if (id || tmdb) {
if (id)
dataa.tv.push([id, tvDetails.season, tvDetails.episode])
else dataa.tv.push([tmdb, tvDetails.season, tvDetails.episode])
localStorage.setItem("userWatched", JSON.stringify(dataa))
}
setTvDetails(prev => {
return { ...prev, episode: current_Episode + 1 }
})
}
}
if (tvDetails.season === 1 && tvDetails.episode === 1) {
showPrevBtn(false)
} else {
showPrevBtn(true)
}
if (tvDetails.season === season[season.length - 1] && tvDetails.episode === episodes[tvDetails.season][episodes[tvDetails.season].length - 1]) {
showNextBtn(false)
} else {
showNextBtn(true)
}
let inputstrings = `${data?.detail.name}season`
let inputStringe = `${data?.detail.name}episode`
if (localStorage.getItem(inputstrings.replace(/\s+/g, "").toLowerCase())) {
localStorage.setItem(inputstrings.replace(/\s+/g, "").toLowerCase(), tvDetails.season)
}
if (localStorage.getItem(inputStringe.replace(/\s+/g, "").toLowerCase())) {
localStorage.setItem(inputStringe.replace(/\s+/g, "").toLowerCase(), tvDetails.episode)
}
if (videoServer.includes("vidsrc.me")) setVideoServer(`https://vidsrc.me/embed/tv?${tmdb ? `tmdb=${tmdb}` : `imdb=${id}`}&season=${tvDetails.season}&episode=${tvDetails.episode}`)
if (videoServer.includes("vidsrc.to")) setVideoServer(`https://vidsrc.to/embed/tv/${tmdb ? `${tmdb}` : `${id}`}/${tvDetails.season}/${tvDetails.episode}`)
else if (videoServer.includes("moviesapi.club")) setVideoServer(`https://moviesapi.club/tv/${tmdb}-${tvDetails.season}-${tvDetails.episode}`)
else if (videoServer.includes("blackvid.space")) setVideoServer(`https://blackvid.space/embed?tmdb=${tmdb}&season=${tvDetails.season}&episode=${tvDetails.episode}`);
}
}, [tvDetails]);
//adding event listener for window to catch left click to remove light setting
useEffect(() => {
document.addEventListener("mousedown", (event) => {
if (event.target !== "iframe") {
switchLight(false)
}
})
}, [])
return (
<>
<Head>
<title>Play Tv | Yaps</title>
</Head>
<div
className={`w-full top-0 left-0 z-[997] bg-black transition duration-300 ease-in-out ${lightStatus ? 'opacity-1 fixed h-screen ' : 'opacity-0 h-0 w-0'}`}>
</div>
<div
className={` w-full flex flex-col ${lightStatus ? '' : 'h-full'} z-[999] h-full`}>
}
}}>
<BiSolidSkipNextCircle
size={35}
className={`${
nextBtn ? 'block' : 'hidden'
} control-button transition duration-300 ease-in-out hover:scale-125`}
/>
<div
className={"w-full h-16 pb-2 text-3xl"}>{data?.detail.name} S{tvDetails.season} E{tvDetails.episode}</div>
<iframe
src={videoServer !== 'vidsrc.to' ? videoServer : `https://vidsrc.to/embed/tv/${tmdb ? tmdb : id}/${tvDetails.season}/${tvDetails.episode}`}
className={"z-50"}
style={{width: '100%', height: '92vh'}}
allowFullScreen="allowfullscreen"></iframe>
<div className={"w-full p-4 pl-0 bg-transparent flex gap-10 flex-row justify-between items-center"}>
<div>
<div className={"relative w-44 flex justify-start items-center gap-1"}>
<div className={"relative"}>
<BiSolidSkipPreviousCircle size={35} onClick={() => {
setnextprevbtnclicked(true)
let current_Episode = tvDetails.episode;
let current_Season = tvDetails.season;
if (episodes[current_Season]) {
if (episodes[current_Season].indexOf(current_Episode) === 0) {
if (season.indexOf(tvDetails.season) !== 0) {
setTvDetails({
season: current_Season - 1,
episode: episodes[current_Season - 1][episodes[current_Season].length - 1]
})
}
} else {
setTvDetails((prev) => {
return {...prev, episode: current_Episode - 1};
})
}
}
}}
className={`${prevBtn ? 'block' : 'hidden'} hover:scale-125 transition control-button duration-300 ease-in-out`}/>
<div
className={"bg-[#222222] absolute left-5 z-50 hidden w-10 text-center tooltip-div"}>
Prev
</div>
</div>
<div className={"relative"} onClick={() => {
let current_Episode = tvDetails.episode;
let current_Season = tvDetails.season;
setnextprevbtnclicked(true)
if (episodes[tvDetails.season]) {
if (episodes[tvDetails.season].indexOf(current_Episode) === episodes[tvDetails.season].length - 1) {
if (season.indexOf(tvDetails.season) !== season.length - 1) {
setTvDetails({season: current_Season + 1, episode: 1})
}
} else {
setTvDetails((prev) => {
return {...prev, episode: current_Episode + 1};
})
}
}
}
}>
<BiSolidSkipNextCircle size={35}
className={`${nextBtn ? 'block' : 'hidden'} hover:scale-125 transition control-button duration-300 ease-in-out`}/>
<div
className={"bg-[#222222] absolute left-5 z-50 hidden w-10 text-center tooltip-div"}>
Next
</div>
</div>
</div>
</div>
<div className={"flex justify-center gap-10 items-center"}>
<div onClick={() => switchLight(!lightStatus)}
className={"flex flex-row gap-1 items-center hover:text-orange-500 transition duration-300 ease-in-out hover:cursor-pointer"}>
<BsFillLightbulbFill/>
<span>Light</span>
</div>
<div className={"relative w-32 "}>
<div
className={"flex z-50 justify-center items-center bg-[#151515] dark:bg-inherit text-white cursor-pointer outline-0 rounded flex-row gap-2"}
onClick={() => {
setSeasonDropDown(!seasonDropDown)
setEpisodeDropDown(false)
}}>
Season {tvDetails.season}<span
className={"pt-1 transition duration-300 ease-in-out"}>{seasonDropDown ?
<AiOutlineDown/> :
<AiOutlineRight/>}</span>
</div>
<div
className={` flex-col z-40 font-normal overflow-y-scroll h-44 text-white w-44 absolute justify-center transition duration-300 ease-in-out items-center ${seasonDropDown ? 'translate-y-0 opacity-1' : 'translate-y-[-150%] opacity-0'} `}>
<ul className={""}>
{season !== [] ? season.map((season, index) => {
return (
<li key={index} onClick={() => {
setTvDetails({season: season, episode: 1})
setSeasonDropDown(false)
}}
className={`relative dropdown-scroll bg-app-semi-dark-blue hover:bg-amber-700 hover:cursor-pointer pl-2 flex items-center justify-evenly w-full h-12 ${tvDetails.season === season ? 'bg-amber-700' : ''}`}>
Season <span>{season}</span>
</li>
)
}) : (<li>No Seasons</li>)
}
</ul>
</div>
</div>
<div className={"relative w-32 "}>
<div
className={"flex z-50 rounded justify-center items-center bg-[#151515] dark:bg-inherit text-white flex-row gap-2"}
onClick={() => {
setEpisodeDropDown(!episodeDropDown)
setSeasonDropDown(false)
}}>
Episode {tvDetails.episode}<span
className={"pt-1 transition duration-300 ease-in-out"}>{episodeDropDown ?
<AiOutlineDown/> :
<AiOutlineRight/>}</span>
</div>
<div
className={` flex-col z-40 bg-app-semi-dark-blue font-normal overflow-y-scroll h-44 text-white w-44 absolute justify-center transition duration-300 ease-in-out items-center ${episodeDropDown ? 'translate-y-0 opacity-1' : 'translate-y-[-150%] opacity-0'} `}>
<ul className={""}>
{episodes[tvDetails.season] ? episodes[tvDetails.season].map((episode, index) => {
return (
<li key={index} onClick={() => {
setTvDetails(prev => {
return {...prev, episode: episode}
})
setEpisodeDropDown(false)
}}
className={`relative dropdown-scroll hover:bg-amber-700 hover:cursor-pointer pl-2 flex items-center justify-evenly w-full h-12 ${tvDetails.episode === episode ? 'bg-amber-700' : ''}`}>
Episode <span>{episode}</span>
</li>
)
}) : (<li>No Episode</li>)
}
</ul>
</div>
</div>
</div>
</div>
<div
className={` ${lightStatus ? 'hidden' : 'flex'} w-full justify-start items-center h-36`}>
<div className={"rounded w-full h-full flex flex-row "}>
<div
className={`dark:text-white text-black p-2 h-full text-center w-1/3`}>
{`You are watching `}
<div className={" font-bold"}>{data ? data.detail.name : ""}</div>
<div> If current server doesn't work please try other servers beside.</div>
</div>
<div
className={` w-2/3 h-full`}>
<div
className={"w-full flex flex-wrap flex-row gap-7 p-5 justify-start items-center h-10"}>
{servers_.map((server, index) => {
return (
<div
onClick={() => {
if (server.servername === "Vidsrc.me")
setVideoServer(`${server.link}${tmdb ? `tmdb=${tmdb}` : `imdb=${id}`}&season=${tvDetails.season}&episode=${tvDetails.episode}`)
else if (server.servername === "Vidsrc.to")
setVideoServer(`${server.link}${tmdb ? `${tmdb}` : `${id}`}/${tvDetails.season}/${tvDetails.episode}`)
else if (server.servername === "Moviesapi.club")
setVideoServer(`${server.link}${tmdb}-${tvDetails.season}-${tvDetails.episode}`)
else
setVideoServer(`${server.link}${tmdb}&season=${tvDetails.season}&episode=${tvDetails.episode}`);
}
}
className={` ${videoServer.includes(server.servername.toLowerCase()) ? 'bg-amber-700' : ''} dark:text-white hover:scale-110 hover:cursor-pointer transition duration-300 ease-in-out rounded p-3 w-max text-center h-8 `}
key={index}>
{server.servername}
</div>
)
})}
</div>
</div>
</div>
className={
'tooltip-div absolute left-5 z-50 hidden w-10 bg-[#222222] text-center'
}>
Next
</div>
</div>
</div>
</>
)
</div>
<div
className={`flex items-center justify-center gap-10 ${
lightStatus ? 'text-white' : ''
}`}>
<div
onClick={() => switchLight(!lightStatus)}
className={
'flex flex-row items-center gap-1 transition duration-300 ease-in-out hover:cursor-pointer hover:text-orange-500'
}>
<BsFillLightbulbFill />
<span>Light</span>
</div>
<div className={'relative w-32 '}>
<div
className={
'z-50 flex cursor-pointer flex-row items-center justify-center gap-2 rounded bg-[#151515] text-white outline-0 dark:bg-inherit'
}
onClick={() => {
setSeasonDropDown(!seasonDropDown)
setEpisodeDropDown(false)
}}>
Season {tvDetails.season}
<span className={'pt-1 transition duration-300 ease-in-out'}>
{seasonDropDown ? <AiOutlineDown /> : <AiOutlineRight />}
</span>
</div>
<div
className={` absolute z-40 h-44 w-44 flex-col items-center justify-center overflow-y-scroll font-normal text-white transition duration-300 ease-in-out ${
seasonDropDown
? 'opacity-1 translate-y-0'
: 'translate-y-[-150%] opacity-0'
} `}>
<ul className={''}>
{season !== [] ? (
season.map((season, index) => {
return (
<li
key={index}
onClick={() => {
setTvDetails({ season: season, episode: 1 })
setSeasonDropDown(false)
}}
className={`dropdown-scroll relative flex h-12 w-full items-center justify-evenly bg-app-semi-dark-blue pl-2 hover:cursor-pointer hover:bg-amber-700 ${
tvDetails.season === season ? 'bg-amber-700' : ''
}`}>
Season <span>{season}</span>
</li>
)
})
) : (
<li>No Seasons</li>
)}
</ul>
</div>
</div>
<div className={'relative w-32 '}>
<div
className={
'z-50 flex flex-row items-center justify-center gap-2 rounded bg-[#151515] text-white dark:bg-inherit'
}
onClick={() => {
setEpisodeDropDown(!episodeDropDown)
setSeasonDropDown(false)
}}>
Episode {tvDetails.episode}
<span className={'pt-1 transition duration-300 ease-in-out'}>
{episodeDropDown ? <AiOutlineDown /> : <AiOutlineRight />}
</span>
</div>
<div
className={` absolute z-40 h-44 w-44 flex-col items-center justify-center overflow-y-scroll bg-app-semi-dark-blue font-normal text-white transition duration-300 ease-in-out ${
episodeDropDown
? 'opacity-1 translate-y-0'
: 'translate-y-[-150%] opacity-0'
} `}>
<ul className={''}>
{episodes[tvDetails.season] ? (
episodes[tvDetails.season].map((episode, index) => {
return (
<li
key={index}
onClick={() => {
setTvDetails(prev => {
return { ...prev, episode: episode }
})
setEpisodeDropDown(false)
}}
className={`dropdown-scroll relative flex h-12 w-full items-center justify-evenly pl-2 hover:cursor-pointer hover:bg-amber-700 ${
tvDetails.episode === episode ? 'bg-amber-700' : ''
}`}>
Episode <span>{episode}</span>
</li>
)
})
) : (
<li>No Episode</li>
)}
</ul>
</div>
</div>
</div>
</div>
<div
className={` ${
lightStatus ? 'hidden' : 'flex'
} h-36 w-full items-center justify-start`}>
<div className={'flex h-full w-full flex-row rounded '}>
<div
className={`h-full w-1/3 p-2 text-center text-black dark:text-white`}>
{`You are watching `}
<div className={' font-bold'}>{data ? data.detail.name : ''}</div>
<div>
{' '}
If current server doesn't work please try other servers beside.
</div>
</div>
<div className={` h-full w-2/3`}>
<div
className={
'flex h-10 w-full flex-row flex-wrap items-center justify-start gap-7 p-5'
}>
{servers_.map((server, index) => {
return (
<div
onClick={() => {
if (server.servername === 'Vidsrc.me')
setVideoServer(
`${server.link}${
tmdb ? `tmdb=${tmdb}` : `imdb=${id}`
}&season=${tvDetails.season}&episode=${
tvDetails.episode
}`
)
else if (server.servername === 'Vidsrc.to')
setVideoServer(
`${server.link}${tmdb ? `${tmdb}` : `${id}`}/${
tvDetails.season
}/${tvDetails.episode}`
)
else if (server.servername === 'Moviesapi.club')
setVideoServer(
`${server.link}${tmdb}-${tvDetails.season}-${tvDetails.episode}`
)
else
setVideoServer(
`${server.link}${tmdb}&season=${tvDetails.season}&episode=${tvDetails.episode}`
)
}}
className={` ${
videoServer.includes(server.servername.toLowerCase())
? 'bg-app-greyish-blue'
: ''
} h-8 w-max rounded p-3 text-center transition duration-300 ease-in-out hover:scale-110 hover:cursor-pointer dark:text-white `}
key={index}>
{server.servername}
</div>
)
})}
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default Tv