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

Merge pull request #62 from the-rarbg/dev

Browse source 
Dev 10 oct
This commit is contained in:
the-rarbg 2023-10-10 23:31:24 +05:30 • committed by GitHub
commit 859160ad7b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 199 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

19
components/CardContinueWatching.js
View file

@ -17,26 +17,31 @@ export default function CardContinueWatching({
if (e.target.tagName !== "svg") {
if (e.ctrlKey) {
if (category === 'movie') {
window.open(`/movie/${id}`)
window.open(`/play/movies?id=${id}`)
} else if (category === 'tv') {
window.open(`/tv/${id}`)
if (id.includes('tt'))
window.open(`/play/tv?id=${id}`)
else
window.open(`/play/tv?tmdb=${id}`)
}
} else {
if (category === 'movie') {
router.push(`/movie/${id}`)
router.push(`/play/movies?id=${id}`)
} else if (category === 'tv') {
router.push(`/tv/${id}`)
if (id.includes('tt'))
router.push(`/play/tv?id=${id}`)
else
router.push(`/play/tv?tmdb=${id}`)
}
}
}
else{
} else {
e.preventDefault()
}
}
return (
<div className='relative w-full cursor-pointer test'>
<div className={"relative continue-card w-full transition duration-400 ease-in-out"} onClick={handleClick}>
<div className={"relative continue-card w-full transition duration-400 ease-in-out"} onClick={handleClick}>
<CardImageCW isTrending src={src}/>
<CardInfoCW
id={id}

4
components/CollectionContinueWatching.js
View file

@ -45,7 +45,7 @@ export default function Collection({}) {
}
}
/*TODO : Currently fetching the data for tv and movie one by one based on the id stored in local storage. */
/*Note : Currently fetching the data for tv and movie one by one based on the id stored in local storage. */
useEffect(() => {
const res = async () => {
if (localStorage.getItem("userWatched")) {
@ -76,7 +76,7 @@ export default function Collection({}) {
}).then(response => response.json()).then(da => {
watchedData.push({
id: tvIds[i][0],
name: da.detail.name,
name: da.detail.name + ` S${tvIds[i][1]} E${tvIds[i][2]}`,
year: da.detail.first_air_date ? da.detail.first_air_date.split("-")[0] : "",
poster_link: da.detail.backdrop_path ? `${TMDB_IMAGE_ENDPOINT}/${da.detail.backdrop_path}` : `${TMDB_IMAGE_ENDPOINT}/${da.detail.poster_path}`,
type: 'tv'

8
pages/f.js
View file

@ -1,8 +0,0 @@
export default function Fdd(){
return(
<>
<div>helllo</div>
</>
)
}

21
pages/play/movies.js
View file

@ -23,7 +23,7 @@ const Movies = () => {
const {theme} = useTheme();
const to = tmdb ? `${tmdb}` : `${id}`
const [lightStatus, switchLight] = useState(false)
const [videoServer, setVideoServer] = useState('')
const [videoServer, setVideoServer] = useState('vidsrc.to')
const {data} = useSWR(`/api/movie/${id}`, fetcher)
useEffect(() => {
if (localStorage.getItem("userWatched")) {
@ -53,12 +53,19 @@ const Movies = () => {
}))
}
}, [id, tmdb]);
useEffect(() => {
document.addEventListener("mousedown", (event) => {
if (event.target !== "iframe") {
switchLight(false)
}
})
}, [])
return (<>
<Head>
<title>Play Movies | Yaps</title>
</Head>
<div
className={` top-0 left-0 z-[997] bg-black transition duration-300 ease-in-out ${lightStatus ? 'opacity-1 fixed w-full h-screen ' : 'opacity-0 h-0 w-0'}`}>
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 : ""}
@ -66,11 +73,11 @@ const Movies = () => {
<div
className={`w-full ${lightStatus ? '' : 'h-full'} z-[999] `}>
<div className={` w-full flex flex-col h-full`}>
<iframe src={videoServer ? videoServer : servers_[0].link + to}
<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 ' : 'w-full '} p-4 pl-0 bg-transparent gap-10 z-[999] flex flex-row justify-start top-[100%] lg:top-[90%] items-center `}>
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/>
@ -80,13 +87,13 @@ const Movies = () => {
<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-[#1e1e1e]' : 'bg-[#c5cc89]'} p-2 h-full flex justify-center items-center flex-col text-center w-1/3`}>
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-[#171e31]' : 'bg-app-shady-white'} text-black w-2/3 h-full`}>
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) => {
@ -97,7 +104,7 @@ const Movies = () => {
else setVideoServer(server.link + data?.imdb.imdb.tmdb_id);
}}
className={`${theme === 'dark' ? 'bg-app-dark-blue' : 'bg-[#c5cc89]'} dark:text-white hover:scale-110 hover:cursor-pointer transition duration-300 ease-in-out rounded p-3 w-max text-center h-8`}
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>)

242
pages/play/tv.js
View file

@ -1,16 +1,18 @@
import React, {useEffect, useState} from 'react'
import {useRouter} from 'next/router';
import Head from 'next/head'
import {AiOutlineDown,AiOutlineRight} from "react-icons/ai";
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/movie/"
servername: "Vidsrc.to", link: "https://vidsrc.to/embed/tv/"
}, {
servername: "Vidsrc.me", link: "https://vidsrc.me/embed/movie?",
servername: "Vidsrc.me", link: "https://vidsrc.me/embed/tv?",
}, {
servername: "Moviesapi.club", link: "https://moviesapi.club/movie/"
servername: "Moviesapi.club", link: "https://moviesapi.club/tv/"
}, {
servername: "Blackvid", link: "https://blackvid.space/embed?tmdb="
}]
@ -19,7 +21,7 @@ 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
@ -28,9 +30,11 @@ const Tv = () => {
const [episodes, setEpisodes] = useState({})
const [seasonDropDown, setSeasonDropDown] = useState(false)
const [episodeDropDown, setEpisodeDropDown] = useState(false)
const [videoServer, setVideoServer] = useState('')
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)
@ -66,8 +70,9 @@ const Tv = () => {
}
}
}, [seasonDropDown, episodeDropDown]);
}, [seasonDropDown, episodeDropDown, nextprevbtnclicked]);
useEffect(() => {
console.log(theme)
if (localStorage.getItem("userWatched")) {
let data = JSON.parse(localStorage.getItem("userWatched"))
let tvPresent = -1
@ -134,10 +139,16 @@ const Tv = () => {
}
}
}
}
}, [tvDetails]);
useEffect(() => {
if (data !== undefined) {
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())) {
@ -152,100 +163,171 @@ const Tv = () => {
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 h-screen top-0 left-0 z-[997] bg-black transition duration-300 ease-in-out ${lightStatus ? 'opacity-1 fixed' : 'opacity-0 h-0 w-0'}`}>
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`}>
<div
className={"w-full h-16 pb-2 text-3xl"}>{data?.detail.name} S{tvDetails.season} E{tvDetails.episode}</div>
<iframe
src={videoServer ? videoServer : `https://vidsrc.to/embed/tv/${tmdb ? tmdb : id}/${tvDetails.season}/${tvDetails.episode}`}
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-start 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-44 "}>
<div
className={"flex z-50 justify-center items-center bg-[#151515] 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 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 ${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 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-44 "}>
<div
className={"flex z-50 rounded justify-center items-center bg-[#151515] 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}
<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};
})
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>)
}
}
}}
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};
})
}
}
</ul>
}
}>
<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={` ${lightStatus ? 'hidden' : 'flex'} w-full justify-start items-center h-36`}>
<div className={"rounded w-full h-full flex flex-row "}>
<div
className={"p-2 h-full bg-app-shady-white dark:bg-app-grey dark:text-black text-center w-1/3"}>
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={" bg-app-pure-white text-black w-2/3 h-full"}>
<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) => {
@ -262,7 +344,7 @@ const Tv = () => {
setVideoServer(`${server.link}${tmdb}&season=${tvDetails.season}&episode=${tvDetails.episode}`);
}
}
className={`dark:bg-app-semi-dark-blue dark:text-white hover:scale-110 hover:cursor-pointer transition duration-300 ease-in-out rounded p-3 w-max text-center h-8 ${videoServer.includes(server.servername.toLowerCase()) ? 'bg-amber-700' : 'bg-app-shady-white'}`}
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>

13
styles/globals.css
View file

@ -826,13 +826,20 @@ td {
transition: opacity 0.4s ease-in-out;
opacity: 0;
}
.continue-card:hover{
filter:blur(5px);
.continue-card:hover {
filter: blur(5px);
backdrop-filter: blur(5px);
}
.continue-card:hover + .close-button {
opacity: 1;
}
.close-button:hover{
.close-button:hover {
opacity: 1;
}
.control-button:hover + .tooltip-div {
display: block;
}