added theme switching for movie page
This commit is contained in:
Rohithk
parent
374d4b4287
commit
0afd57f580
2 changed files with 473 additions and 367 deletions
|
|
@ -1,149 +1,148 @@
|
|||
import { useRouter } from 'next/router';
|
||||
import { useRouter } from 'next/router'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Loader } from '../../../Common/Loader';
|
||||
import { getListComment, movieDetailsPost, postComment } from '../../../service/service';
|
||||
import moment from 'moment';
|
||||
import { formatBytes } from '../../../Common/CardExpanded';
|
||||
import YouTube from "react-youtube";
|
||||
import ToastMsg from '../../../Common/ToastMsg';
|
||||
import { Loader } from '../../../Common/Loader'
|
||||
import {
|
||||
getListComment,
|
||||
movieDetailsPost,
|
||||
postComment,
|
||||
} from '../../../service/service'
|
||||
import moment from 'moment'
|
||||
import { formatBytes } from '../../../Common/CardExpanded'
|
||||
import YouTube from 'react-youtube'
|
||||
import ToastMsg from '../../../Common/ToastMsg'
|
||||
import Head from 'next/head'
|
||||
const Details = () => {
|
||||
|
||||
let trackers = [
|
||||
"udp://tracker.therarbg.com:6969/announce",
|
||||
"udp://tracker.t-rb.org:6969/announce",
|
||||
"udp://tracker.opentrackr.org:1337/announce",
|
||||
"udp://opentracker.i2p.rocks:6969/announce",
|
||||
"udp://tracker.openbittorrent.com:6969/announce",
|
||||
"udp://open.demonii.com:1337/announce",
|
||||
"udp://exodus.desync.com:6969/announce",
|
||||
"udp://open.stealth.si:80/announce",
|
||||
"udp://tracker.torrent.eu.org:451/announce",
|
||||
"udp://tracker.moeking.me:6969/announce",
|
||||
"udp://tracker1.bt.moack.co.kr:80/announce",
|
||||
"udp://tracker.bitsearch.to:1337/announce",
|
||||
"udp://explodie.org:6969/announce",
|
||||
"udp://tracker.tiny-vps.com:6969/announce",
|
||||
"udp://tracker.theoks.net:6969/announce",
|
||||
"udp://p4p.arenabg.com:1337/announce",
|
||||
"udp://movies.zsw.ca:6969/announce",
|
||||
|
||||
'udp://tracker.therarbg.com:6969/announce',
|
||||
'udp://tracker.t-rb.org:6969/announce',
|
||||
'udp://tracker.opentrackr.org:1337/announce',
|
||||
'udp://opentracker.i2p.rocks:6969/announce',
|
||||
'udp://tracker.openbittorrent.com:6969/announce',
|
||||
'udp://open.demonii.com:1337/announce',
|
||||
'udp://exodus.desync.com:6969/announce',
|
||||
'udp://open.stealth.si:80/announce',
|
||||
'udp://tracker.torrent.eu.org:451/announce',
|
||||
'udp://tracker.moeking.me:6969/announce',
|
||||
'udp://tracker1.bt.moack.co.kr:80/announce',
|
||||
'udp://tracker.bitsearch.to:1337/announce',
|
||||
'udp://explodie.org:6969/announce',
|
||||
'udp://tracker.tiny-vps.com:6969/announce',
|
||||
'udp://tracker.theoks.net:6969/announce',
|
||||
'udp://p4p.arenabg.com:1337/announce',
|
||||
'udp://movies.zsw.ca:6969/announce',
|
||||
]
|
||||
|
||||
|
||||
|
||||
let temp = "&tr="
|
||||
let tracker = ""
|
||||
trackers.map((item) => {
|
||||
let temp = '&tr='
|
||||
let tracker = ''
|
||||
trackers.map(item => {
|
||||
tracker = tracker + temp + item
|
||||
})
|
||||
|
||||
const router = useRouter();
|
||||
let id;
|
||||
let slug;
|
||||
const router = useRouter()
|
||||
let id
|
||||
let slug
|
||||
const [loader, setLoader] = useState(false)
|
||||
const [data, setData] = useState()
|
||||
const [comment, setComment] = useState("")
|
||||
const [eid, setEid] = useState("")
|
||||
const [comment, setComment] = useState('')
|
||||
const [eid, setEid] = useState('')
|
||||
const [commentList, setCommentList] = useState([])
|
||||
const [magnateDownload, setMagnateDownload] = useState("")
|
||||
const [torrentDownload, setTorrentDownload] = useState("")
|
||||
const [highligth, setHighLight] = useState("Trackers")
|
||||
const [magnateDownload, setMagnateDownload] = useState('')
|
||||
const [torrentDownload, setTorrentDownload] = useState('')
|
||||
const [highligth, setHighLight] = useState('Trackers')
|
||||
|
||||
useEffect(() => {
|
||||
if (router.isReady) {
|
||||
id = router.query.id;
|
||||
slug = router.query.slug;
|
||||
if (!id) return null;
|
||||
id = router.query.id
|
||||
slug = router.query.slug
|
||||
if (!id) return null
|
||||
getDetails()
|
||||
}
|
||||
|
||||
}, [router.isReady]);
|
||||
}, [router.isReady])
|
||||
|
||||
const getDetails = () => {
|
||||
setLoader(true)
|
||||
movieDetailsPost(id, slug).then((res) => {
|
||||
setLoader(false)
|
||||
movieDetailsPost(id, slug)
|
||||
.then(res => {
|
||||
setLoader(false)
|
||||
|
||||
let url = `magnet:?xt=urn:btih:${res?.data?.info_hash}&dn=${res?.data?.name}${trackers}`
|
||||
let url_t = `https://m2t.mirrorbay.org/info-hash/${res?.data?.info_hash}/${res?.data?.name}/?apikey=therarbg`
|
||||
setMagnateDownload(url)
|
||||
setTorrentDownload(url_t)
|
||||
let url = `magnet:?xt=urn:btih:${res?.data?.info_hash}&dn=${res?.data?.name}${trackers}`
|
||||
let url_t = `https://m2t.mirrorbay.org/info-hash/${res?.data?.info_hash}/${res?.data?.name}/?apikey=therarbg`
|
||||
setMagnateDownload(url)
|
||||
setTorrentDownload(url_t)
|
||||
|
||||
|
||||
|
||||
setData(res?.data)
|
||||
setEid(res?.data?.eid)
|
||||
getCommentInfo(res?.data?.eid)
|
||||
|
||||
}).catch((err) => {
|
||||
setLoader(false)
|
||||
console.log(err)
|
||||
})
|
||||
setData(res?.data)
|
||||
setEid(res?.data?.eid)
|
||||
getCommentInfo(res?.data?.eid)
|
||||
})
|
||||
.catch(err => {
|
||||
setLoader(false)
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
const getCommentInfo = (value) => {
|
||||
const getCommentInfo = value => {
|
||||
setLoader(true)
|
||||
let token = localStorage.getItem("access_token")
|
||||
getListComment(value, token).then((res) => {
|
||||
console.log("response", res)
|
||||
setLoader(false)
|
||||
setCommentList(res?.data?.results)
|
||||
}).catch((err) => {
|
||||
setLoader(false)
|
||||
console.log("error :", err)
|
||||
})
|
||||
let token = localStorage.getItem('access_token')
|
||||
getListComment(value, token)
|
||||
.then(res => {
|
||||
console.log('response', res)
|
||||
setLoader(false)
|
||||
setCommentList(res?.data?.results)
|
||||
})
|
||||
.catch(err => {
|
||||
setLoader(false)
|
||||
console.log('error :', err)
|
||||
})
|
||||
}
|
||||
const postCommentInfo = () => {
|
||||
setLoader(true)
|
||||
let token = localStorage.getItem("access_token")
|
||||
let token = localStorage.getItem('access_token')
|
||||
if (!token) {
|
||||
router.push("/login")
|
||||
router.push('/login')
|
||||
}
|
||||
let data = {
|
||||
trb_post: eid,
|
||||
comment: comment
|
||||
comment: comment,
|
||||
}
|
||||
postComment(data, token).then((res) => {
|
||||
console.log("response", res)
|
||||
getCommentInfo(eid)
|
||||
}).catch((err) => {
|
||||
setLoader(false)
|
||||
if (err?.res?.status === 401) {
|
||||
window.location.hre = "/"
|
||||
}
|
||||
console.log("error :", err)
|
||||
})
|
||||
postComment(data, token)
|
||||
.then(res => {
|
||||
console.log('response', res)
|
||||
getCommentInfo(eid)
|
||||
})
|
||||
.catch(err => {
|
||||
setLoader(false)
|
||||
if (err?.res?.status === 401) {
|
||||
window.location.hre = '/'
|
||||
}
|
||||
console.log('error :', err)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const opts = {
|
||||
height: "300px",
|
||||
width: "100%",
|
||||
border: "8px",
|
||||
height: '300px',
|
||||
width: '100%',
|
||||
border: '8px',
|
||||
playerVars: {
|
||||
autoplay: 0,
|
||||
},
|
||||
};
|
||||
const [disabledToast,setDisabledToast]=useState(false)
|
||||
const copyToClipBoard = async() => {
|
||||
if(disabledToast){
|
||||
return
|
||||
}
|
||||
try {
|
||||
|
||||
await navigator.clipboard.writeText(magnateDownload);
|
||||
ToastMsg("Copied!","success")
|
||||
setDisabledToast(true)
|
||||
setTimeout(()=>{
|
||||
setDisabledToast(false)
|
||||
},3000)
|
||||
}
|
||||
catch (err) {
|
||||
console.log("pp",err)
|
||||
ToastMsg('Failed to copy!',"error");
|
||||
const [disabledToast, setDisabledToast] = useState(false)
|
||||
const copyToClipBoard = async () => {
|
||||
if (disabledToast) {
|
||||
return
|
||||
}
|
||||
};
|
||||
try {
|
||||
await navigator.clipboard.writeText(magnateDownload)
|
||||
ToastMsg('Copied!', 'success')
|
||||
setDisabledToast(true)
|
||||
setTimeout(() => {
|
||||
setDisabledToast(false)
|
||||
}, 3000)
|
||||
} catch (err) {
|
||||
console.log('pp', err)
|
||||
ToastMsg('Failed to copy!', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -151,22 +150,40 @@ const Details = () => {
|
|||
<Head>
|
||||
<title>{data?.name} | Yaps</title>
|
||||
</Head>
|
||||
<div className='w-full pb-5 m-auto'>
|
||||
<div className="w-full bg-white dark:dark:bg-card bg-white bg-opacity-10 rounded-lg border-gray-200 border-opacity-30 justify-start flex flex-col md:flex-row">
|
||||
<div className="w-[50%] md:w-[15%] mx-auto p-2 relative">
|
||||
<img src={data?.thumbnail ? data?.thumbnail : "https://i.therarbg.com/np.jpg"} width={800} height={100} alt='movie' />
|
||||
<div className='m-auto w-full pb-5'>
|
||||
<div className='dark:bg-card flex w-full flex-col justify-start rounded-lg border-gray-200 border-opacity-30 bg-gray-600 bg-opacity-10 p-10 md:flex-row'>
|
||||
<div className='relative mx-auto w-[50%] p-2 md:w-[15%]'>
|
||||
<img
|
||||
src={
|
||||
data?.thumbnail
|
||||
? data?.thumbnail
|
||||
: 'https://i.therarbg.com/np.jpg'
|
||||
}
|
||||
width={800}
|
||||
height={100}
|
||||
alt='movie'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-[94%] md:w-[50%] flex flex-col justify-around text-gray-200 text-opacity-80 text-[16px] p-2 h-auto long-and-truncated ">
|
||||
<h1 >{data?.name}</h1>
|
||||
<div className='long-and-truncated flex h-auto w-[94%] flex-col justify-around p-2 text-[16px] text-app-dark-blue text-opacity-80 dark:text-gray-200 md:w-[50%] '>
|
||||
<h1>{data?.name}</h1>
|
||||
<div className='flex space-x-4 '>
|
||||
<a href={`/get-posts/category:${data?.category_str}`} className='cursor-pointer px-2 bg-primary/10 text-primary border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "none", fontWeight: "400" }}>{data?.category_str}</a>
|
||||
<span className='px-2 bg-primary/10 text-primary border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "none", fontWeight: "400" }}> 👍 {data?.imdb_data?.rating}</span>
|
||||
<a
|
||||
href={`/get-posts/category:${data?.category_str}`}
|
||||
className='my-4 cursor-pointer border-primary bg-primary/10 px-2 text-xs text-primary hover:bg-primary/30'
|
||||
style={{ border: 'none', fontWeight: '400' }}>
|
||||
{data?.category_str}
|
||||
</a>
|
||||
<span
|
||||
className='my-4 border-primary bg-primary/10 px-2 text-xs text-primary hover:bg-primary/30'
|
||||
style={{ border: 'none', fontWeight: '400' }}>
|
||||
{' '}
|
||||
👍 {data?.imdb_data?.rating}
|
||||
</span>
|
||||
{/* <span className='px-2 bg-primary/10 text-primary border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "none", fontWeight: "400" }}> 👍 0</span> */}
|
||||
</div>
|
||||
|
||||
|
||||
<div className='flex w-full justify-between text-gray-200 text-[13px] bottom-[0.7rem]'>
|
||||
<div className='bottom-[0.7rem] flex w-full justify-between text-[13px] text-app-dark-blue dark:text-gray-200'>
|
||||
<div>
|
||||
<span>Seeders</span>
|
||||
<span>Leechers</span>
|
||||
|
|
@ -179,140 +196,198 @@ const Details = () => {
|
|||
<span>{data?.leechers}</span>
|
||||
<span>{formatBytes(data?.size)}</span>
|
||||
<span>{data?.downloads}</span>
|
||||
<span>{moment(data?.timestamp).format("MMMM Do YYYY")}</span>
|
||||
<span>{moment(data?.timestamp).format('MMMM Do YYYY')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-[35%] text-gray-200 text-opacity-80 text-[16px] p-2 h-auto flex-1 min-w-0 md:mx-1 relative text-right" >
|
||||
<div className='flex flex-col justify-around h-full'>
|
||||
<div className='relative h-auto w-full min-w-0 flex-1 p-2 text-right text-[16px] text-gray-200 text-opacity-80 md:mx-1 md:w-[35%]'>
|
||||
<div className='flex h-full flex-col justify-around'>
|
||||
<div className='flex flex-col items-end'>
|
||||
<button className='w-full xl:w-[70%] px-[2rem] py-2 bg-primary/10 text-gray-100 border-primary my-3 text-[15px] rounded bg-gradient-to-r from-green-400 via-purple-500 to-purple-600 hover:text-app-dark-blue' onClick={() => {
|
||||
window.open(torrentDownload, '_self')
|
||||
}} >Torrent Download</button>
|
||||
<button className='w-full xl:w-[70%] px-[2rem] py-2 bg-primary/10 text-gray-100 border-primary my-3 text-[15px] rounded bg-gradient-to-r from-[#420075] via-purple-500 to-[#FF0054] hover:text-app-dark-blue' onClick={() => {
|
||||
router.push(`/streaming?id=${data?.imdb}`)
|
||||
}} >Play Now</button>
|
||||
|
||||
<button className='w-full xl:w-[70%] px-[2rem] py-2 bg-primary/10 border-primary text-[15px] my-3 text-gray-100 rounded bg-gradient-to-r from-violet-500 via-purple-500 to-indigo-900 hover:text-app-dark-blue' onClick={() => {
|
||||
|
||||
copyToClipBoard()
|
||||
|
||||
|
||||
}} >🧲 Copy To Clipboard </button>
|
||||
<button className='w-full xl:w-[70%] px-[2rem] py-2 bg-primary/10 border-primary text-[15px] text-gray-100 rounded bg-gradient-to-r from-green-400 via-blue-500 to-blue-600 hover:text-app-dark-blue' onClick={() => {
|
||||
|
||||
window.open(magnateDownload, '_blank');
|
||||
|
||||
|
||||
}} >🧲 Magnet Download </button>
|
||||
|
||||
|
||||
<button
|
||||
className='my-3 w-full rounded border-primary bg-primary/10 bg-gradient-to-r from-green-400 via-purple-500 to-purple-600 px-[2rem] py-2 text-[15px] text-gray-100 hover:text-app-dark-blue xl:w-[70%]'
|
||||
onClick={() => {
|
||||
window.open(torrentDownload, '_self')
|
||||
}}>
|
||||
Torrent Download
|
||||
</button>
|
||||
<button
|
||||
className='my-3 w-full rounded border-primary bg-primary/10 bg-gradient-to-r from-[#420075] via-purple-500 to-[#FF0054] px-[2rem] py-2 text-[15px] text-gray-100 hover:text-app-dark-blue xl:w-[70%]'
|
||||
onClick={() => {
|
||||
router.push(`/streaming?id=${data?.imdb}`)
|
||||
}}>
|
||||
Play Now
|
||||
</button>
|
||||
|
||||
<button
|
||||
className='my-3 w-full rounded border-primary bg-primary/10 bg-gradient-to-r from-violet-500 via-purple-500 to-indigo-900 px-[2rem] py-2 text-[15px] text-gray-100 hover:text-app-dark-blue xl:w-[70%]'
|
||||
onClick={() => {
|
||||
copyToClipBoard()
|
||||
}}>
|
||||
🧲 Copy To Clipboard{' '}
|
||||
</button>
|
||||
<button
|
||||
className='w-full rounded border-primary bg-primary/10 bg-gradient-to-r from-green-400 via-blue-500 to-blue-600 px-[2rem] py-2 text-[15px] text-gray-100 hover:text-app-dark-blue xl:w-[70%]'
|
||||
onClick={() => {
|
||||
window.open(magnateDownload, '_blank')
|
||||
}}>
|
||||
🧲 Magnet Download{' '}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='align-bottom flex bottom-2 justify-end'>
|
||||
<button className='px-[1.4rem] w-[50%] xl:w-[35%] py-2 bg-primary/10 text-primary rounded border-primary mr-[0.4rem] text-[13px] hover:bg-primary/30 mt-4' style={{ border: "none", fontWeight: "400" }} onClick={() => {
|
||||
window.location.reload()
|
||||
}} > ↺ Refresh</button>
|
||||
<button className='px-[1.4rem] w-[50%] xl:w-[35%] py-2 bg-primary/10 text-primary rounded border-primary ml-[0.4rem] text-[13px] hover:bg-primary/30 mt-4' style={{ border: "none", fontWeight: "400" }} > !⃝ Report</button>
|
||||
|
||||
<div className='bottom-2 flex justify-end align-bottom'>
|
||||
<button
|
||||
className='mr-[0.4rem] mt-4 w-[50%] rounded border-primary bg-primary/10 px-[1.4rem] py-2 text-[13px] text-primary hover:bg-primary/30 xl:w-[35%]'
|
||||
style={{ border: 'none', fontWeight: '400' }}
|
||||
onClick={() => {
|
||||
window.location.reload()
|
||||
}}>
|
||||
{' '}
|
||||
↺ Refresh
|
||||
</button>
|
||||
<button
|
||||
className='ml-[0.4rem] mt-4 w-[50%] rounded border-primary bg-primary/10 px-[1.4rem] py-2 text-[13px] text-primary hover:bg-primary/30 xl:w-[35%]'
|
||||
style={{ border: 'none', fontWeight: '400' }}>
|
||||
!Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div className={`grid gap-2 mb-6 ${data?.imdb_data?.video_list[0]?.key ? "md:grid-cols-3" : "md:grid-cols-2"}`}>
|
||||
<div
|
||||
className={`mb-6 grid gap-2 ${
|
||||
data?.imdb_data?.video_list[0]?.key
|
||||
? 'md:grid-cols-3'
|
||||
: 'md:grid-cols-2'
|
||||
}`}>
|
||||
<div>
|
||||
<div className='flex space-x-4 text-gray-500 text-[13px] mb-4'>
|
||||
<span className={`cursor-pointer mb-[5px] px-[0.5rem] rounded ${highligth === "Files" ? "bg-primary/10" : ""}`} onClick={() => setHighLight("Files")} >Files</span>
|
||||
<span className={`cursor-pointer mb-[5px] px-[0.5rem] rounded ${highligth === "Trackers" ? "bg-primary/10" : ""}`} onClick={() => setHighLight("Trackers")} >Trackers</span>
|
||||
<span className={`cursor-pointer mb-[5px] px-[0.5rem] rounded ${highligth === "More" ? "bg-primary/10" : ""}`} onClick={() => setHighLight("More")} >More Info</span>
|
||||
<div className='mb-4 flex space-x-4 text-[13px] text-app-dark-blue dark:text-gray-200'>
|
||||
<span
|
||||
className={`mb-[5px] cursor-pointer rounded px-[0.5rem] ${
|
||||
highligth === 'Files' ? 'bg-primary/10' : ''
|
||||
}`}
|
||||
onClick={() => setHighLight('Files')}>
|
||||
Files
|
||||
</span>
|
||||
<span
|
||||
className={`mb-[5px] cursor-pointer rounded px-[0.5rem] ${
|
||||
highligth === 'Trackers' ? 'bg-primary/10' : ''
|
||||
}`}
|
||||
onClick={() => setHighLight('Trackers')}>
|
||||
Trackers
|
||||
</span>
|
||||
<span
|
||||
className={`mb-[5px] cursor-pointer rounded px-[0.5rem] ${
|
||||
highligth === 'More' ? 'bg-primary/10' : ''
|
||||
}`}
|
||||
onClick={() => setHighLight('More')}>
|
||||
More Info
|
||||
</span>
|
||||
</div>
|
||||
<div className='p-2 text-gray-300 overflow-y-scroll dark:bg-card bg-white bg-opacity-10 h-[300px] rounded-lg border-gray-200 border-opacity-30' style={{ fontSize: "14px" }}>
|
||||
{
|
||||
trackers.map((item, index) => {
|
||||
return (
|
||||
<p className='p-1 long-and-truncated font-light w-fit break-all' key={index}>
|
||||
{item}
|
||||
</p>
|
||||
)
|
||||
})
|
||||
}
|
||||
<div
|
||||
className='dark:bg-card h-[300px] overflow-y-scroll rounded-lg border-gray-200 border-opacity-30 bg-white bg-opacity-10 p-2 text-app-dark-blue dark:text-gray-300'
|
||||
style={{ fontSize: '14px' }}>
|
||||
{trackers.map((item, index) => {
|
||||
return (
|
||||
<p
|
||||
className='long-and-truncated w-fit break-all p-1 font-light'
|
||||
key={index}>
|
||||
{item}
|
||||
</p>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data?.imdb_data?.video_list[0]?.key ? (
|
||||
<div className='text-gray-300'>
|
||||
<span className='pl-5'>Trailer</span>
|
||||
|
||||
<YouTube
|
||||
videoId={data?.imdb_data?.video_list[0]?.key}
|
||||
style={{ borderRadius: '8px', marginTop: '17px' }}
|
||||
opts={opts}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{data?.imdb_data?.video_list[0]?.key ? <div className='text-gray-300'>
|
||||
<span className='pl-5'>Trailer</span>
|
||||
|
||||
<YouTube videoId={data?.imdb_data?.video_list[0]?.key} style={{ borderRadius: "8px", marginTop: '17px' }}
|
||||
opts={opts} />
|
||||
</div>
|
||||
: null}
|
||||
|
||||
<div className='text-gray-300'>
|
||||
<div className=' text-app-dark-blue dark:text-gray-300'>
|
||||
<span className='pl-5'>Similar Torrents</span>
|
||||
<div className='dark:bg-card bg-white pt-2 w-full bg-opacity-10 overflow-y-scroll rounded-lg h-[300px] border-gray-200 border-opacity-30' style={{ marginTop: '17px' }}>
|
||||
{data?.recomendations.length > 0 ?
|
||||
<div
|
||||
className='dark:bg-card h-[300px] w-full overflow-y-scroll rounded-lg border-gray-200 border-opacity-30 bg-white bg-opacity-10 pt-2'
|
||||
style={{ marginTop: '17px' }}>
|
||||
{data?.recomendations.length > 0 ? (
|
||||
data?.recomendations?.map((item, index) => {
|
||||
return (
|
||||
<div key={index} onClick={() => {
|
||||
let slug = item[`n`].toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
|
||||
window.location.href = `/post-detail/${item?.pk}/${slug}/`;
|
||||
}} className='cursor-pointer text-gray-300 m-3 long-and-truncated w-fit break-all' style={{ fontSize: "14px" }}>
|
||||
|
||||
<p >
|
||||
{item[`n`]}
|
||||
</p>
|
||||
<div className='text-off-white flex item-center text-[12px]'>
|
||||
<span className='px-2 bg-primary/10 text-primary mr-3 py-[1.5px] rounded border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "none", fontWeight: "400" }}>{item['c']}</span>
|
||||
<span className='px-2 bg-primary/10 text-primary mr-3 py-[1.5px] rounded border-primary my-4 text-xs hover:bg-primary/30'>
|
||||
<i className="fa fa-database text-primary mx-4"></i> {" " + formatBytes(item[`s`])}
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => {
|
||||
let slug = item[`n`]
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[^\w\s-]/g, '')
|
||||
.replace(/[\s_-]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
window.location.href = `/post-detail/${item?.pk}/${slug}/`
|
||||
}}
|
||||
className='long-and-truncated m-3 w-fit cursor-pointer break-all text-app-dark-blue dark:text-gray-300'
|
||||
style={{ fontSize: '14px' }}>
|
||||
<p>{item[`n`]}</p>
|
||||
<div className='item-center flex text-[12px] text-off-white'>
|
||||
<span
|
||||
className='my-4 mr-3 rounded border-primary bg-primary/10 px-2 py-[1.5px] text-xs text-primary hover:bg-primary/30'
|
||||
style={{ border: 'none', fontWeight: '400' }}>
|
||||
{item['c']}
|
||||
</span>
|
||||
<span className='my-4 mr-3 rounded border-primary bg-primary/10 px-2 py-[1.5px] text-xs text-primary hover:bg-primary/30'>
|
||||
<i className='fa fa-database mx-4 text-primary'></i>{' '}
|
||||
{' ' + formatBytes(item[`s`])}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
})
|
||||
:
|
||||
) : (
|
||||
<div className='nosimilar_torrent'>
|
||||
<h1>Sorry No Similar Torrents available</h1>
|
||||
</div>}
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="w-full mt-[2rem] p-10 dark:bg-card bg-white bg-opacity-10 rounded-lg border-gray-200 border-opacity-30 justify-start inline-grid relative">
|
||||
<div className='dark:bg-card relative mt-[2rem] inline-grid w-full justify-start rounded-lg border-gray-200 border-opacity-30 bg-white bg-opacity-10 p-10'>
|
||||
<div className='mb-2 w-[90%]'>
|
||||
{
|
||||
commentList?.map((item, index) => {
|
||||
return (
|
||||
<div key={index} className='p-3 dark:bg-card bg-white bg-opacity-10 rounded-lg border-gray-200 border-opacity-30'>
|
||||
<h1>{item?.info?.user}:</h1><span>
|
||||
{item?.comment || "This IS A GOOD movie"}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
{commentList?.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className='dark:bg-card rounded-lg border-gray-200 border-opacity-30 bg-white bg-opacity-10 p-3'>
|
||||
<h1>{item?.info?.user}:</h1>
|
||||
<span>{item?.comment || 'This IS A GOOD movie'}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className='mb-2 w-[90%]'>
|
||||
<input type="text" className='w-full border-gray-200 w-[90%] rounded border-opacity-30 text-[12px] dark:bg-card bg-white bg-opacity-10 p-2 px-3 text-gray-500' onChange={(e) => setComment(e.target.value)} placeholder="Write your comments here" />
|
||||
<button onClick={postCommentInfo} className='px-2 py-[2.5px] rounded w-[100px] bg-primary/10 text-primary border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "solid 0.5px", fontWeight: "400" }} >POST</button>
|
||||
<input
|
||||
type='text'
|
||||
className='dark:bg-card w-[90%] w-full rounded border-gray-200 border-opacity-30 bg-app-dark-blue bg-opacity-10 p-2 px-3 text-[12px] text-app-dark-blue placeholder:text-app-dark-blue dark:bg-white dark:text-gray-500 dark:placeholder:text-app-pure-white'
|
||||
onChange={e => setComment(e.target.value)}
|
||||
placeholder='Write your comments here'
|
||||
/>
|
||||
<button
|
||||
onClick={postCommentInfo}
|
||||
className='my-4 w-[100px] rounded border-primary bg-primary/10 px-2 py-[2.5px] text-xs text-primary hover:bg-primary/30'
|
||||
style={{ border: 'solid 0.5px', fontWeight: '400' }}>
|
||||
POST
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Details
|
||||
export default Details
|
||||
|
|
|
|||
347
pages/search.js
347
pages/search.js
|
|
@ -1,173 +1,204 @@
|
|||
import CardCompact from '../Common/CardCompact'
|
||||
import CardExpanded from '../Common/CardExpanded'
|
||||
import {useRouter} from 'next/router'
|
||||
import React, {useState} from 'react'
|
||||
import {MovieSVG, SearchSVG} from '../SVG/search'
|
||||
import {getSearchResult} from '../service/service';
|
||||
import {Loader} from '../Common/Loader'
|
||||
import {CompactList, ExpandedList} from '../SVG/listing'
|
||||
import { useRouter } from 'next/router'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { MovieSVG, SearchSVG } from '../SVG/search'
|
||||
import { getSearchResult } from '../service/service'
|
||||
import { Loader } from '../Common/Loader'
|
||||
import { CompactList, ExpandedList } from '../SVG/listing'
|
||||
import ToastMsg from '../Common/ToastMsg'
|
||||
import Head from 'next/head'
|
||||
|
||||
let data1 = [{name: "Movie", cat: "Movies", time: "10D"}, {name: "TV-Show", cat: "TV", time: "10D"}, {
|
||||
name: "Games",
|
||||
cat: "Games",
|
||||
time: "10D"
|
||||
}, {name: "Music", cat: "Music", time: "10D"}, {name: "Anime", cat: "Anime", time: "10D"}, {
|
||||
name: "Books",
|
||||
cat: "Books",
|
||||
time: "10D"
|
||||
}, {name: "Other", cat: "Other", time: "10D"}, {name: "XXX", cat: "XXX", time: "1D"}]
|
||||
|
||||
import { useTheme } from 'next-themes'
|
||||
let data1 = [
|
||||
{ name: 'Movie', cat: 'Movies', time: '10D' },
|
||||
{ name: 'TV-Show', cat: 'TV', time: '10D' },
|
||||
{
|
||||
name: 'Games',
|
||||
cat: 'Games',
|
||||
time: '10D',
|
||||
},
|
||||
{ name: 'Music', cat: 'Music', time: '10D' },
|
||||
{ name: 'Anime', cat: 'Anime', time: '10D' },
|
||||
{
|
||||
name: 'Books',
|
||||
cat: 'Books',
|
||||
time: '10D',
|
||||
},
|
||||
{ name: 'Other', cat: 'Other', time: '10D' },
|
||||
{ name: 'XXX', cat: 'XXX', time: '1D' },
|
||||
]
|
||||
|
||||
const Home = () => {
|
||||
const router = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
const [movieList, setMovieList] = useState([])
|
||||
const [search, setSearch] = useState(false)
|
||||
const [loader, setLoader] = useState(false)
|
||||
const [ListType, setListType] = useState('expanded');
|
||||
const [searchSuccess, setSearchSuccess] = useState(false)
|
||||
const [checkboxInput, setCheckboxInput] = useState([])
|
||||
const [searchbarclicked, setSearchBar] = useState(false)
|
||||
const searchResult = (e) => {
|
||||
e.preventDefault()
|
||||
setLoader(true)
|
||||
getSearchResult(search, checkboxInput).then((res) => {
|
||||
setSearchSuccess(true)
|
||||
console.log("page", res?.data?.results)
|
||||
setLoader(false)
|
||||
setMovieList(res.data.results)
|
||||
}).catch((err) => {
|
||||
console.log("error", err)
|
||||
|
||||
ToastMsg("Some thing went wrong ", "error")
|
||||
setLoader(false)
|
||||
})
|
||||
const [movieList, setMovieList] = useState([])
|
||||
const [search, setSearch] = useState(false)
|
||||
const [loader, setLoader] = useState(false)
|
||||
const [ListType, setListType] = useState('expanded')
|
||||
const [searchSuccess, setSearchSuccess] = useState(false)
|
||||
const [checkboxInput, setCheckboxInput] = useState([])
|
||||
const [searchbarclicked, setSearchBar] = useState(false)
|
||||
const { theme, setTheme } = useTheme()
|
||||
useEffect(() => {
|
||||
setTheme(theme)
|
||||
})
|
||||
const searchResult = e => {
|
||||
e.preventDefault()
|
||||
setLoader(true)
|
||||
getSearchResult(search, checkboxInput)
|
||||
.then(res => {
|
||||
setSearchSuccess(true)
|
||||
console.log('page', res?.data?.results)
|
||||
setLoader(false)
|
||||
setMovieList(res.data.results)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('error', err)
|
||||
|
||||
ToastMsg('Some thing went wrong ', 'error')
|
||||
setLoader(false)
|
||||
})
|
||||
}
|
||||
const handleCheckboxChange = event => {
|
||||
const { value, checked } = event.target
|
||||
console.log('event', checked, value)
|
||||
if (checked) {
|
||||
setCheckboxInput([...checkboxInput, value])
|
||||
} else {
|
||||
setCheckboxInput(checkboxInput.filter(item => item !== value))
|
||||
}
|
||||
const handleCheckboxChange = (event) => {
|
||||
const {value, checked} = event.target;
|
||||
console.log("event", checked, value)
|
||||
if (checked) {
|
||||
setCheckboxInput([...checkboxInput, value]);
|
||||
} else {
|
||||
setCheckboxInput(checkboxInput.filter((item) => item !== value));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className="container mx-auto py-3 font-light bg-transparent min-h-screen justify-center text-center font-montserrat">
|
||||
<Head>
|
||||
<title>Register | Yaps</title>
|
||||
</Head>
|
||||
{loader ? <Loader/> : null}
|
||||
<div>
|
||||
<p className='text-[3rem] md:text-[6rem] font-bold leading-[3.5rem] md:leading-[7rem] pt-16'> This
|
||||
World.<br/>At Your Fingertips.</p>
|
||||
<div>
|
||||
|
||||
<form onSubmit={(e) => searchResult(e)}
|
||||
className={`border-b-[1.5px] w-10/12 md:w-1/2 mx-auto flex my-10 items-center justify-center border-primary px-1`}>
|
||||
<input
|
||||
className='bg-transparent w-full py-4 font-light text-lg outline-none dark:placeholder:text-app-pure-white placeholder:text-black placeholder:font-montserrat font-montserrat'
|
||||
placeholder='Start typing what you want ?' onChange={(e) => setSearch(e.target.value)}/>
|
||||
<div onClick={(e) => {
|
||||
searchResult(e)
|
||||
}}>
|
||||
<SearchSVG/>
|
||||
</div>
|
||||
</form>
|
||||
<div className='mx-8 flex text-center justify-center'>
|
||||
<div className='font-thin flex flex-wrap items-center flex-row justify-evenly'>
|
||||
{
|
||||
data1.map((item, index) => {
|
||||
return (
|
||||
<label key={index} className="checkbox">
|
||||
<input type="checkbox" name={item?.name} value={item?.cat}
|
||||
className='w-4 h-4 rounded checked:bg-primary dark:checked:border-primary border border-blue-800 dark:border-primary'
|
||||
onChange={handleCheckboxChange}
|
||||
checked={checkboxInput?.includes(item?.cat)}/>
|
||||
<span
|
||||
className={"dark:!text-app-pure-white !text-app-dark-blue "}>{item?.name}</span>
|
||||
</label>
|
||||
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
{searchSuccess ?
|
||||
<div className='flex justify-center m-2 w-[98%] relative'>
|
||||
<div className=" bg-off-white/10 w-[64%] rounded-xl justify-center align-middle p-2">
|
||||
{movieList.length > 0 ? <span>Your Search Result</span> :
|
||||
<span>No data found for : "{search}"</span>}
|
||||
</div>
|
||||
|
||||
{movieList.length > 0 ? <div className='flex justify-end absolute right-0'>
|
||||
<div
|
||||
className={`px-4 py-[0.35rem] ${ListType === 'compact' ? 'text-primary bg-primary/30' : ''} rounded-xl cursor-pointer transition-all duration-200`}
|
||||
onClick={() => {
|
||||
setListType('compact')
|
||||
}}><CompactList/></div>
|
||||
<div
|
||||
className={`px-4 py-[0.35rem] ${ListType === 'expanded' ? 'text-primary bg-primary/30' : ''} rounded-xl cursor-pointer transition-all duration-200`}
|
||||
onClick={() => {
|
||||
setListType('expanded')
|
||||
|
||||
}}><ExpandedList/></div>
|
||||
</div>
|
||||
: null}
|
||||
|
||||
|
||||
</div> : null}
|
||||
<div className={`flex-1 flex-wrap pl-6 py-8 justify-center`}>
|
||||
{movieList?.map((item, index) => {
|
||||
if (ListType === 'compact') {
|
||||
return (
|
||||
<CardCompact key={index} item={item}/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<CardExpanded key={index} item={item}/>
|
||||
)
|
||||
}
|
||||
})}
|
||||
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div className='md:px-0 w-full md:w-8/12 mx-auto text-center flex flex-wrap gap-4 justify-center'>
|
||||
{
|
||||
data1.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className='relative dark:bg-app-dark-blue bg-[#f3f3f3] dark:shadow-[0px] shadow-2xl'
|
||||
key={index}>
|
||||
<div key={index}
|
||||
onClick={() => window.location.href = `/get-posts/category:${item?.cat}?time=${item?.time}`}
|
||||
className={`cursor-pointer w-[150px] md:w-[195px] h-[115px] md:pl-[26px] md:pr-[161px] pt-7 pb-16 bg-app-dark-blue dark:bg-off-white/10 rounded-lg border-[0] dark:border-off-white/30 flex-col justify-start items-center md:items-start gap-3.5 inline-flex hover:bg-[#18141f] hover:scale-[1.05] transition duration-300 ease-in-out dark:hover:bg-primary/10 dark:hover:border-primary/50 group `}>
|
||||
<div
|
||||
className="w-[30px] h-[30px] p-[2.50px] justify-center items-center inline-flex text-off-white group-hover:text-primary">
|
||||
<MovieSVG/></div>
|
||||
<div
|
||||
className="text-off-white hover:text-app-dark-blue dark:group-hover:text-primary text-opacity-80 text-[13px] w-20 text-center md:text-start leading-[0px] ">{item?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className='font-montserrat container mx-auto min-h-screen justify-center bg-transparent py-3 text-center font-light'>
|
||||
<Head>
|
||||
<title>Register | Yaps</title>
|
||||
</Head>
|
||||
{loader ? <Loader /> : null}
|
||||
<div>
|
||||
<p className='pt-16 text-[3rem] font-bold leading-[3.5rem] md:text-[6rem] md:leading-[7rem]'>
|
||||
{' '}
|
||||
This World.
|
||||
<br />
|
||||
At Your Fingertips.
|
||||
</p>
|
||||
<div>
|
||||
<form
|
||||
onSubmit={e => searchResult(e)}
|
||||
className={`mx-auto my-10 flex w-10/12 items-center justify-center border-b-[1.5px] border-primary px-1 md:w-1/2`}>
|
||||
<input
|
||||
className='placeholder:font-montserrat font-montserrat w-full bg-transparent py-4 text-lg font-light outline-none placeholder:text-black dark:placeholder:text-app-pure-white'
|
||||
placeholder='Start typing what you want ?'
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
/>
|
||||
<div
|
||||
onClick={e => {
|
||||
searchResult(e)
|
||||
}}>
|
||||
<SearchSVG />
|
||||
</div>
|
||||
</form>
|
||||
<div className='mx-8 flex justify-center text-center'>
|
||||
<div className='flex flex-row flex-wrap items-center justify-evenly font-thin'>
|
||||
{data1.map((item, index) => {
|
||||
return (
|
||||
<label key={index} className='checkbox'>
|
||||
<input
|
||||
type='checkbox'
|
||||
name={item?.name}
|
||||
value={item?.cat}
|
||||
className='h-4 w-4 rounded border border-blue-800 checked:bg-primary dark:border-primary dark:checked:border-primary'
|
||||
onChange={handleCheckboxChange}
|
||||
checked={checkboxInput?.includes(item?.cat)}
|
||||
/>
|
||||
<span
|
||||
className={
|
||||
'!text-app-dark-blue dark:!text-app-pure-white '
|
||||
}>
|
||||
{item?.name}
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
{searchSuccess ? (
|
||||
<div className='relative m-2 flex w-[98%] justify-center'>
|
||||
<div className=' w-[64%] justify-center rounded-xl bg-off-white/10 p-2 align-middle'>
|
||||
{movieList.length > 0 ? (
|
||||
<span>Your Search Result</span>
|
||||
) : (
|
||||
<span>No data found for : "{search}"</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{movieList.length > 0 ? (
|
||||
<div className='absolute right-0 flex justify-end'>
|
||||
<div
|
||||
className={`px-4 py-[0.35rem] ${
|
||||
ListType === 'compact' ? 'bg-primary/30 text-primary' : ''
|
||||
} cursor-pointer rounded-xl transition-all duration-200`}
|
||||
onClick={() => {
|
||||
setListType('compact')
|
||||
}}>
|
||||
<CompactList />
|
||||
</div>
|
||||
<div
|
||||
className={`px-4 py-[0.35rem] ${
|
||||
ListType === 'expanded'
|
||||
? 'bg-primary/30 text-primary'
|
||||
: ''
|
||||
} cursor-pointer rounded-xl transition-all duration-200`}
|
||||
onClick={() => {
|
||||
setListType('expanded')
|
||||
}}>
|
||||
<ExpandedList />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className={`flex-1 flex-wrap justify-center py-8 pl-6`}>
|
||||
{movieList?.map((item, index) => {
|
||||
if (ListType === 'compact') {
|
||||
return <CardCompact key={index} item={item} />
|
||||
} else {
|
||||
return <CardExpanded key={index} item={item} />
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div className='mx-auto flex w-full flex-wrap justify-center gap-4 text-center md:w-8/12 md:px-0'>
|
||||
{data1.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className='relative bg-[#f3f3f3] shadow-2xl dark:bg-app-dark-blue dark:shadow-[0px]'
|
||||
key={index}>
|
||||
<div
|
||||
key={index}
|
||||
onClick={() =>
|
||||
(window.location.href = `/get-posts/category:${item?.cat}?time=${item?.time}`)
|
||||
}
|
||||
className={`group inline-flex h-[115px] w-[150px] cursor-pointer flex-col items-center justify-start gap-3.5 rounded-lg border-[0] bg-app-dark-blue pb-16 pt-7 transition duration-300 ease-in-out hover:scale-[1.05] hover:bg-[#18141f] hover:text-white dark:border-off-white/30 dark:bg-off-white/10 dark:hover:border-primary/50 dark:hover:bg-primary/10 md:w-[195px] md:items-start md:pl-[26px] md:pr-[161px] `}>
|
||||
<div className='inline-flex h-[30px] w-[30px] items-center justify-center p-[2.50px] text-off-white group-hover:text-primary'>
|
||||
<MovieSVG />
|
||||
</div>
|
||||
<div className='w-20 text-center text-[13px] leading-[0px] text-off-white text-opacity-80 hover:text-app-pure-white dark:hover:text-app-dark-blue dark:group-hover:text-primary md:text-start '>
|
||||
{item?.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue