fixed color shades
This commit is contained in:
Rohithk
parent
08653c04f0
commit
a8ac2f1240
3 changed files with 158 additions and 79 deletions
|
|
@ -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'
|
||||
|
|
|
|||
232
pages/play/tv.js
232
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 = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [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())) {
|
||||
|
|
@ -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 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 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] 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) => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue