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

Merge pull request #55 from Rohithk2003/dev

Browse source 
Fixed ui issues
This commit is contained in:
the-rarbg 2023-10-01 08:16:09 +05:30 • committed by GitHub
commit 514f9bf83c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 614 additions and 591 deletions
Download patch file Download diff file Expand all files Collapse all files

56
components/CardContinueWatching.js
View file

@ -1,41 +1,57 @@
import {useRouter} from 'next/router'
import CardImageCW from "./CardImageCW";
import CardInfoCW from "./CardInfoCW";
import {AiOutlineClose} from "react-icons/ai";
export default function CardContinueWatching({
id,
category,
year,
src,
clearHistoryFunction,
title,
}) {
const router = useRouter()
const handleClick = (e) => {
if (e.ctrlKey) {
if (category === 'movie') {
window.open(`/movie/${id}`)
} else if (category === 'tv') {
window.open(`/tv/${id}`)
}
} else {
if (category === 'movie') {
router.push(`/movie/${id}`)
} else if (category === 'tv') {
router.push(`/tv/${id}`)
if (e.target.tagName !== "svg") {
if (e.ctrlKey) {
if (category === 'movie') {
window.open(`/movie/${id}`)
} else if (category === 'tv') {
window.open(`/tv/${id}`)
}
} else {
if (category === 'movie') {
router.push(`/movie/${id}`)
} else if (category === 'tv') {
router.push(`/tv/${id}`)
}
}
}
else{
e.preventDefault()
}
}
return (
<a className='relative w-full cursor-pointer' target={"_blank"} onClick={handleClick}>
<CardImageCW isTrending src={src}/>
<CardInfoCW
id={id}
category={category}
title={title}
year={year}
/>
</a>
<div className='relative w-full cursor-pointer test'>
<div className={"relative continue-card w-full transition duration-400 ease-in-out"} onClick={handleClick}>
<CardImageCW isTrending src={src}/>
<CardInfoCW
id={id}
category={category}
title={title}
year={year}
/>
</div>
<div onClick={() => {
clearHistoryFunction(id, category)
}}
data-id={"close-btn"}
className={"text-black grid place-items-center close-button w-6 h-6 opacity-20 bg-app-shady-white top-2 right-2 rounded-full absolute"}>
<AiOutlineClose/>
</div>
</div>
)
}

2
components/CardImageCW.js
View file

@ -3,7 +3,7 @@ import {shimmer, toBase64} from '../utils'
export default function CardImageCW({src, alt}) {
return (
<div className='relative w-full rounded-lg'>
<div className='relative rounded-lg'>
<div
className={
'relative h-[140px] w-[240px] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-app-dark-blue after:opacity-50 after:content-[""] sm:h-[180px] sm:w-[420px]'

2
components/CardInfoCW.js
View file

@ -10,7 +10,7 @@ export default function CardInfoCW({
return (
<div
className={
'absolute left-4 bottom-4 z-40 h-fit w-fit truncate text-ellipsis '
'absolute left-4 bottom-4 z-40 h-fit w-full truncate text-ellipsis '
}
>
<div

86
components/CollectionContinueWatching.js
View file

@ -18,42 +18,75 @@ export default function Collection({}) {
localStorage.removeItem("userWatched");
}
}
const clear_movie = (id, category) => {
setDataLoaded(false)
if (localStorage) {
if (category === "tv") {
let data = JSON.parse(localStorage.getItem("userWatched")).tv;
let out = []
for (let i in data) {
if (data[i][0] !== id) {
out.push(data[i])
}
}
let new_data = {movies: JSON.parse(localStorage.getItem("userWatched")).movies, tv: out}
localStorage.setItem("userWatched", JSON.stringify(new_data));
} else {
let data = JSON.parse(localStorage.getItem("userWatched")).movies;
let out = []
for (let i in data) {
if (data[i] !== id) {
out.push(data[i])
}
}
let new_data = {tv: JSON.parse(localStorage.getItem("userWatched")).tv, movies: out}
localStorage.setItem("userWatched", JSON.stringify(new_data));
}
}
}
/*TODO : 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")) {
const movieIds = JSON.parse(localStorage.getItem("userWatched")).movies
let watchedData = []
for (let i in movieIds) {
await fetch(`${router.asPath}api/movie/${movieIds[i]}`, {
credentials: "include"
}).then(response => response.json()).then(da => {
watchedData.push({
id: movieIds[i],
name: da.detail.original_title,
year: da.detail.release_date.split('-')[0],
poster_link: da.detail.backdrop_path ? `${TMDB_IMAGE_ENDPOINT}/${da.detail.backdrop_path}` : `${TMDB_IMAGE_ENDPOINT}/${da.detail.poster_path}`,
type: 'movie'
});
})
}
const tvIds = JSON.parse(localStorage.getItem("userWatched")) ? JSON.parse(localStorage.getItem("userWatched")).tv : ""
for (let i in tvIds) {
if (tvIds[i] !== [])
await fetch(`${router.asPath}api/tv/${tvIds[i][0]}`, {
if (JSON.parse(localStorage.getItem("userWatched")).movies.length === 0 && JSON.parse(localStorage.getItem("userWatched")).tv.length === 0) {
changeDataStatus(true)
setDataLoaded(true)
} else {
const movieIds = JSON.parse(localStorage.getItem("userWatched")).movies
let watchedData = []
for (let i in movieIds) {
await fetch(`${router.asPath}api/movie/${movieIds[i]}`, {
credentials: "include"
}).then(response => response.json()).then(da => {
watchedData.push({
id: tvIds[i][0],
name: da.detail.name,
year: da.detail.first_air_date ? da.detail.first_air_date.split("-")[0] : "",
id: movieIds[i],
name: da.detail.original_title,
year: da.detail.release_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'
type: 'movie'
});
})
}
const tvIds = JSON.parse(localStorage.getItem("userWatched")) ? JSON.parse(localStorage.getItem("userWatched")).tv : ""
for (let i in tvIds) {
if (tvIds[i] !== [])
await fetch(`${router.asPath}api/tv/${tvIds[i][0]}`, {
credentials: "include"
}).then(response => response.json()).then(da => {
watchedData.push({
id: tvIds[i][0],
name: da.detail.name,
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'
});
})
}
setData(watchedData)
setDataLoaded(true)
changeDataStatus(false)
}
setData(watchedData)
setDataLoaded(true)
} else {
setDataLoaded(true)
changeDataStatus(true)
@ -62,7 +95,7 @@ export default function Collection({}) {
res();
}
,
[data]
[dataLoaded]
)
;
return (
@ -86,6 +119,7 @@ export default function Collection({}) {
return (<li key={index}>
<CardContinueWatching category={data.type} id={data.id}
title={data.name}
clearHistoryFunction={clear_movie}
year={data.year}
src={data.poster_link}/>
</li>

70
pages/play/movies.js
View file

@ -2,21 +2,13 @@ import React, {useEffect, useState} from 'react'
import {useRouter} from 'next/router';
import Head from 'next/head'
import useSWR from "swr";
import FilmGenres from '../../components/FilmGenres'
import FilmHeading from '../../components/FilmHeading'
import FilmImage from '../../components/FilmImage'
import FilmInfo from '../../components/FilmInfo'
import FilmRating from '../../components/FilmRating'
import FilmSynopsis from '../../components/FilmSynopsis'
import {renderLanguage, renderLength, renderRating, renderStatus, renderYear} from "../movie/[id]";
import {AiOutlineExpand} from "react-icons/ai";
import {BsFillLightbulbFill} from "react-icons/bs";
import {BiCollapse} from "react-icons/bi";
import {useTheme} from "next-themes";
const servers_ = [{
servername: "Vidsrc.me", link: "https://vidsrc.me/embed/movie?",
}, {
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/"
}, {
@ -28,11 +20,11 @@ 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('')
const {data} = useSWR(`/api/movie/${id}`, fetcher)
const [MovieDetailsHidden, setMovieDetailsHidden] = useState(true)
useEffect(() => {
if (localStorage.getItem("userWatched")) {
let data = JSON.parse(localStorage.getItem("userWatched"))
@ -68,35 +60,33 @@ const Movies = () => {
<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'}`}>
</div>
<div className={"text-4xl"}>
{data ? data.imdb.imdb.name : ""}
</div>
<div
className={`${MovieDetailsHidden ? 'lg:grid-row-1 lg:grid-cols-2' : 'lg:grid-row-2 lg:grid-cols-1'} grid w-full ${lightStatus ? '' : 'h-full'} z-[999] grid-cols-1 grid-rows-2`}>
<div className={` ${MovieDetailsHidden ? 'w-full' : 'min-w-2/3 '} flex flex-col h-full`}>
<iframe src={videoServer ? videoServer : servers_[0].link + me}
className={`z-[998] ${lightStatus ? 'absolute left-0 lg:left-[20%] h-[80vh] lg:w-2/3 w-full ' : MovieDetailsHidden ? 'w-full h-[60vh]' : 'w-full h-[95vh]'}`}
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}
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 `}>
<div onClick={() => setMovieDetailsHidden(!MovieDetailsHidden)}
className={`${lightStatus ? 'hidden' : 'flex'} flex-row gap-1 items-center hover:text-orange-500 transition duration-300 ease-in-out hover:cursor-pointer`}>
{MovieDetailsHidden ?
<AiOutlineExpand/>:<BiCollapse/> }
<span>{MovieDetailsHidden ? 'Expand' : 'Collapse'}</span>
</div>
<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>{MovieDetailsHidden ? 'Light' : 'Light'}</span>
<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={"p-2 h-full bg-app-shady-white dark:bg-app-grey dark:text-black text-center w-1/3"}>
className={`${theme === 'dark' ? 'bg-[#1e1e1e]' : 'bg-[#c5cc89]'} 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={" bg-app-pure-white text-black w-2/3 h-full"}>
<div
className={`${theme === 'dark' ? 'bg-[#171e31]' : 'bg-app-shady-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) => {
@ -104,9 +94,10 @@ const Movies = () => {
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={"dark:bg-app-semi-dark-blue dark:text-white hover:scale-110 hover:cursor-pointer transition duration-300 ease-in-out bg-app-shady-white rounded p-3 w-max text-center h-8"}
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`}
key={index}>
{server.servername}
</div>)
@ -116,33 +107,6 @@ const Movies = () => {
</div>
</div>
</div>
<div
className={` ${MovieDetailsHidden ? '' : 'hidden'} ${lightStatus ? 'hidden' : 'flex'} min-w-1/3 h-full`}>
<section
className='flex flex-row ml-10 lg:mt-0 mt-10 lg:flex-col lg:justify-end justify-center items-center lg:items-baseline'>
<FilmImage
src={data?.detail?.poster_path}
title={data?.detail?.title}
/>
<section>
<FilmHeading
from={'movie'}
tagline={data?.detail?.tagline}
title={data?.detail?.title}
/>
<FilmRating number={renderRating(data?.detail?.vote_average)}/>
<FilmSynopsis synopsis={data?.detail?.overview}/>
<FilmInfo
media_type={data?.imdb.imdb.content_type.toLowerCase()}
language={renderLanguage(data?.detail?.spoken_languages || [])}
length={renderLength(data?.detail?.runtime)}
status={renderStatus(data?.detail?.status)}
year={renderYear(data?.detail?.release_date)}
/>
<FilmGenres genres={data?.detail?.genres || []}/>
</section>
</section>
</div>
</div>
</>)
}

42
pages/play/tv.js
View file

@ -1,25 +1,19 @@
import React, {useEffect, useState} from 'react'
import {useRouter} from 'next/router';
import Head from 'next/head'
import {AiOutlineDown, AiOutlineExpand, AiOutlineRight} from "react-icons/ai";
import {AiOutlineDown,AiOutlineRight} from "react-icons/ai";
import useSWR from "swr";
import {BsFillLightbulbFill} from "react-icons/bs";
import {BiCollapse} from "react-icons/bi";
const servers_ = [
{
servername: "Vidsrc.me", link: "https://vidsrc.me/embed/tv?",
},
{
servername: "Vidsrc.to", link: "https://vidsrc.to/embed/tv/"
},
{
servername: "Moviesapi.club", link: "https://moviesapi.club/tv/"
},
{
servername: "Blackvid", link: "https://blackvid.space/embed?tmdb="
}
]
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 Tv = () => {
@ -27,11 +21,9 @@ const Tv = () => {
const {id, tmdb} = router.query;
const {data} = useSWR(`/api/tv/${tmdb}`, fetcher)
const [MovieDetailsHidden, setMovieDetailsHidden] = useState(false)
const [tvDetails, setTvDetails] = useState({
episode: 1, season: 1
})
console.log(data)
const [season, SetSeason] = useState([]);
const [episodes, setEpisodes] = useState({})
const [seasonDropDown, setSeasonDropDown] = useState(false)
@ -81,7 +73,6 @@ const Tv = () => {
let tvPresent = -1
if (id || tmdb) {
for (let i in data.tv) {
console.log(data.tv[i], id, tmdb)
if (id) {
if (data.tv[i][0] === id) {
tvPresent = i
@ -170,26 +161,19 @@ const Tv = () => {
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'}`}>
</div>
<div
className={` ${MovieDetailsHidden ? 'w-full' : 'min-w-2/3 '} flex flex-col ${lightStatus ? '' : 'h-full'} z-[999] h-full`}>
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.me/embed/tv?tmdb=${tmdb ? tmdb : id}&season=${tvDetails.season}&episode=${tvDetails.episode}`}
src={videoServer ? 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={() => setMovieDetailsHidden(!MovieDetailsHidden)}
className={`${lightStatus ? 'hidden' : 'flex'} flex flex-row gap-1 items-center hover:text-orange-500 transition duration-300 ease-in-out hover:cursor-pointer`}>
{MovieDetailsHidden ?
<AiOutlineExpand/> : <BiCollapse/>}
<span>{MovieDetailsHidden ? 'Expand' : 'Collapse'}</span>
</div>
<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>{MovieDetailsHidden ? 'Light' : 'Light'}</span>
<span>Light</span>
</div>
<div className={"relative w-44 "}>
<div

987
styles/globals.css
View file

File diff suppressed because it is too large Load diff