fixed color shades

components/CollectionContinueWatching.js

@@ -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'

pages/play/tv.js

@@ -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 = useTheme();
     const {data} = useSWR(`/api/tv/${tmdb}`, fetcher)
     const [tvDetails, setTvDetails] = useState({
         episode: 1, season: 1
@@ -30,7 +32,9 @@ const Tv = () => {
     const [episodeDropDown, setEpisodeDropDown] = useState(false)
     const [videoServer, setVideoServer] = useState('')
     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,7 +70,7 @@ const Tv = () => {
             }
 
         }
-    }, [seasonDropDown, episodeDropDown]);
+    }, [seasonDropDown, episodeDropDown, nextprevbtnclicked]);
     useEffect(() => {
         if (localStorage.getItem("userWatched")) {
             let data = JSON.parse(localStorage.getItem("userWatched"))
@@ -134,10 +138,16 @@ const Tv = () => {
                         }
                     }
             }
-        }
+            if (tvDetails.season === 1 && tvDetails.episode === 1) {
-    }, [tvDetails]);
+                showPrevBtn(false)
-    useEffect(() => {
+            } else {
-        if (data !== undefined) {
+                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())) {
@@ -158,7 +168,7 @@ const Tv = () => {
                 <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`}>
@@ -169,83 +179,145 @@ const Tv = () => {
                     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 className={"w-full p-4 pl-0 bg-transparent flex gap-10 flex-row justify-between 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}
-                                            })
-                                            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 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] 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-32 "}>
+                            <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}
+                                                })
+                                                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={"p-2 h-full bg-app-shady-white dark:bg-app-grey dark:text-black text-center w-1/3"}>
+                            className={`${theme.theme === 'dark' ? 'bg-app-dark-blue 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={`${theme.theme === 'dark' ? 'bg-app-dark-blue text-white':' 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) => {

styles/globals.css

@@ -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;
 }