diff --git a/Common/CardExpanded.js b/Common/CardExpanded.js index 1a87713..c952ce2 100644 --- a/Common/CardExpanded.js +++ b/Common/CardExpanded.js @@ -31,7 +31,7 @@ const CardExpanded = props => { router.push(`/post-detail/${props.item?.pk}/${slug}/`) }} key={props.index} - className={` my-3 mt-6 inline-flex md:h-44 cursor-pointer flex-col justify-center overflow-hidden rounded-md py-2 ${ + className={` my-3 mt-6 inline-flex cursor-pointer flex-col justify-center overflow-hidden rounded-md py-2 md:h-44 ${ theme === 'dark' ? 'bg-card ' : ' bg-app-shady-white' } fab zoomcss grid_hover_effect hover:border-primary/50`} style={{ width: '200px' }}> @@ -41,7 +41,7 @@ const CardExpanded = props => { backgroundImage: `url("${ props.item[`t`] ? props.item[`t`] - : props.categoryId === 'XXX' + : props.categoryId === 'XXX' ? 'https://i.therarbg.com/xnp.jpg' : 'https://i.therarbg.com/np.jpg' }")`, diff --git a/Common/TorrentList.js b/Common/TorrentList.js index 1aed48c..1f964a5 100644 --- a/Common/TorrentList.js +++ b/Common/TorrentList.js @@ -1,215 +1,187 @@ -import moment from 'moment'; -import { useRouter } from 'next/router'; +import moment from 'moment' +import {useRouter} from 'next/router' import React from 'react' -import Modal from "react-modal"; - -import { formatBytes } from './CardExpanded'; - -import DataTable, { createTheme } from 'react-data-table-component'; - -const TorrentList = ({ setisTorrent, torrent_list, runtime }) => { - - const router = useRouter() - - const customStyles = { - - content: { - - top: '50%', - - left: '50%', - - right: 'auto', - - bottom: 'auto', - - marginRight: '-50%', - - transform: 'translate(-50%, -50%)', - - background: "#171e30", - - maxHeight: "700px", - - maxWidth: "1080px", - - width: "100%", - - borderColor: "#454851", - - - - }, - - }; - - console.log("torrent_list", torrent_list) - - - - const columns = [ - { - name: 'Name', - selector: row => row.name, - sortable: true, - - }, - { - name: 'Action', - - cell: (row, index) => { - let slug = row?.name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, ''); - - return ( - router.push(`/post-detail/${row?.eid}/${slug}/`)}> - Download - - ) - }, - width: "10%", - style: { - color: "#296ac8", - cursor: "pointer", - - } - }, - { - name: 'Category', - selector: row => row.category_str, - width: "10%", - sortable: true, - }, - { - name: 'Date', - selector: row => moment(row?.last_checked).format("DD-MM-YYYY"), - width: "10%", - sortable: true, - }, - { - name: 'Runtime', - selector: row => moment.utc(runtime * 1000).format('HH:mm:ss'), - width: "11%", - sortable: true, - }, - { - name: 'Size', - selector: row => formatBytes(row?.size), - sortable: true, - width: "10%", - sortFunction: (a, b) => { - - return a.size - b.size; - }, - }, - { - name: 'S', - selector: row => row?.seeders, - sortable: true, - width: "7%", - style: { - color: "#00FF00", - - - } - - }, - { - name: 'L', - selector: row => row.leechers, - sortable: true, - width: "7%", - style: { - color: "#dd0c0e", - - } - }, - ]; - createTheme('dark', { - background: { - default: 'transparent', - }, - }); - - const customCss = { - - headCells: { - style: { - fontSize: "14px", - fontWeight: "700", - color: "#C2D8D3" - }, - }, - - }; - - - console.log("torrent_list", torrent_list) - - - - - - - - createTheme('dark', { - - background: { - - default: 'transparent', - - }, - - }); - - - - - - - return ( - - <> - - - - setisTorrent(false)} - - > { - - torrent_list.length > 0 ? - - - - :
- -

- - Sorry Torrent Not Available Try after some days !!! - -

- -
} - - {/* { +import Modal from 'react-modal' + +import {formatBytes} from './CardExpanded' + +import DataTable, {createTheme} from 'react-data-table-component' +import {useTheme} from 'next-themes' + +const TorrentList = ({setisTorrent, torrent_list, runtime}) => { + const theme = useTheme() + const router = useRouter() + + const customStyles = { + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + marginRight: '-50%', + transform: 'translate(-50%, -50%)', + background: '#171e30', + maxHeight: '700px', + maxWidth: '1500px', + border: '0px', + width: '100%', + borderColor: '#454851', + }, + } + + const qualityRegex = /(4K|720p|1080p|2160p|720P|360P|360p|1080P)/i + + const columns = [ + { + name: 'Name', + selector: row => row.name, + sortable: true, + }, + { + name: 'Action', + + cell: (row, index) => { + let slug = row?.name + .toLowerCase() + .trim() + .replace(/[^\w\s-]/g, '') + .replace(/[\s_-]+/g, '-') + .replace(/^-+|-+$/g, '') + + return ( + router.push(`/post-detail/${row?.eid}/${slug}/`)}> + Download + + ) + }, + width: '8%', + style: { + color: '#296ac8', + cursor: 'pointer', + }, + }, + { + name: 'Category', + selector: row => row.category_str, + width: '8%', + sortable: true, + }, + { + name: 'Res', + selector: row => + row.name.match(qualityRegex) ? row.name.match(qualityRegex)[0] : '', + width: '6%', + sortable: true, + sortFunction: (a, b) => { + function compareQuality(a, b) { + if (a && b) { + const regex = /(\d+)p/ + const qualityA = parseInt( + a.name.match(qualityRegex) + ? a.name.match(qualityRegex)[0]?.match(regex) + : '' + ) + const qualityB = parseInt( + b.name.match(qualityRegex) + ? b.name.match(qualityRegex)[0]?.match(regex) + : '' + ) + return qualityA - qualityB + } + } + + return compareQuality(a, b) + }, + }, + { + name: 'Date', + selector: row => moment(row?.last_checked).format('DD-MM-YYYY'), + width: '9%', + sortable: true, + }, + { + name: 'Runtime', + selector: row => moment.utc(runtime * 1000).format('HH:mm:ss'), + width: '9%', + sortable: true, + }, + { + name: 'Size', + selector: row => formatBytes(row?.size), + sortable: true, + width: '7%', + sortFunction: (a, b) => { + return a.size - b.size + }, + }, + { + name: 'S | L', + cell: (row, index) => { + let l = row?.leechers + let s = row?.seeders + return ( + + {l} | {s} + + ) + }, + sortable: true, + sortFunction: (a, b) => { + return a?.leechers - b?.leechers + }, + width: '8%', + style: { + color: '#00FF00', + }, + }, + + ] + createTheme('dark', { + background: { + default: 'transparent', + }, + }) + + const customCss = { + headCells: { + style: { + fontSize: '14px', + fontWeight: '700', + color: theme === 'dark' ? '#C2D8D3' : '#000000', + }, + }, + } + + console.log('torrent_list', torrent_list) + + createTheme('dark', { + background: { + default: 'transparent', + }, + }) + + return ( + <> + setisTorrent(false)}> + {' '} + {torrent_list.length > 0 ? ( + + ) : ( +
+

Sorry Torrent Not Available Try after some days !!!

+
+ )} + {/* {          torrent_list.length>0? @@ -313,17 +285,9 @@ const TorrentList = ({ setisTorrent, torrent_list, runtime }) => {               } */} - - - - - - - - ) - + + + ) } - - -export default TorrentList \ No newline at end of file +export default TorrentList diff --git a/components/CardContinueWatching.js b/components/CardContinueWatching.js new file mode 100644 index 0000000..a616c1a --- /dev/null +++ b/components/CardContinueWatching.js @@ -0,0 +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.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 ( +
+
+ + +
+
{ + 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"}> + +
+
+ ) +} diff --git a/components/CardImageCW.js b/components/CardImageCW.js new file mode 100644 index 0000000..efe14b9 --- /dev/null +++ b/components/CardImageCW.js @@ -0,0 +1,30 @@ +import Image from 'next/image' +import {shimmer, toBase64} from '../utils' + +export default function CardImageCW({src, alt}) { + return ( +
+
+ {alt} +
+ {/* TODO: Add this back only after the bookmark feature is implemented */} + {/*
+ +
*/} +
+ ) +} diff --git a/components/CardInfo.js b/components/CardInfo.js index ec7b942..9351105 100644 --- a/components/CardInfo.js +++ b/components/CardInfo.js @@ -52,7 +52,7 @@ export default function CardInfo({ ) } -function renderYear(year) { +export function renderYear(year) { if (!year) { return 'N/A' } else { @@ -60,7 +60,7 @@ function renderYear(year) { } } -function renderCategoryIcon(category) { +export function renderCategoryIcon(category) { if (category === 'movie') { return } else { @@ -68,7 +68,7 @@ function renderCategoryIcon(category) { } } -function renderCategoryText(category) { +export function renderCategoryText(category) { if (category === 'movie') { return 'Movie' } else { @@ -76,7 +76,7 @@ function renderCategoryText(category) { } } -function renderRating(rating) { +export function renderRating(rating) { if (rating === true) { return '18+' } else { diff --git a/components/CardInfoCW.js b/components/CardInfoCW.js new file mode 100644 index 0000000..f4d8f97 --- /dev/null +++ b/components/CardInfoCW.js @@ -0,0 +1,45 @@ +import {renderYear} from "../pages/movie/[id]"; +import {renderCategoryIcon, renderCategoryText} from "./CardInfo"; + +export default function CardInfoCW({ + category, + title, + rating, + year, + }) { + return ( +
+
+

{renderYear(year)}

+
+ {renderCategoryIcon(category)} +

+ {renderCategoryText(category)} +

+
+ {/*TODO: Add this back only after I find an appropriate way to get the rating info from TMDB api */} + {/*

{renderRating(rating)}

*/} +
+

+ {title} +

+
+ ) +} + diff --git a/components/CardNormal.js b/components/CardNormal.js index a866bef..4a89b79 100644 --- a/components/CardNormal.js +++ b/components/CardNormal.js @@ -5,12 +5,20 @@ import CardInfo from './CardInfo' export default function CardNormal({ id, category, rating, src, title, year }) { const router = useRouter() - const handleClick = () => { - if (category === 'movie') { - router.push(`/movie/${id}`) - } else if (category === 'tv') { - router.push(`/tv/${id}`) - } + 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}`) + } + } } return ( diff --git a/components/CardTrending.js b/components/CardTrending.js index 350a824..039c943 100644 --- a/components/CardTrending.js +++ b/components/CardTrending.js @@ -1,36 +1,44 @@ -import { useRouter } from 'next/router' +import {useRouter} from 'next/router' import CardImage from './CardImage' import CardInfo from './CardInfo' export default function CardTrending({ - id, - category, - rating, - src, - title, - year, -}) { - const router = useRouter() + id, + category, + rating, + src, + title, + year, + }) { + const router = useRouter() - const handleClick = () => { - if (category === 'movie') { - router.push(`/movie/${id}`) - } else if (category === 'tv') { - router.push(`/tv/${id}`) + 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}`) + } + } } - } - return ( -
- - -
- ) + return ( + + + + + ) } diff --git a/components/Collection.js b/components/Collection.js index 3e6d0b2..38af717 100644 --- a/components/Collection.js +++ b/components/Collection.js @@ -1,56 +1,56 @@ import useSWR from 'swr' -import { fetcher, renderResults, sliceArray } from '../utils' +import {fetcher, renderResults, sliceArray} from '../utils' import CardNormal from './CardNormal' import Heading from './Heading' import Loading from './Loading' export default function Collection({ - Component = CardNormal, - endpoint, - href, - isHomePage, - isTrending, - limit = 8, - media_type = 'movie', - title, - type = 'movie' -}) { - const { data, error } = useSWR(endpoint, fetcher) + Component = CardNormal, + endpoint, + href, + isHomePage, + isTrending, + limit = 8, + media_type = 'movie', + title, + type = 'movie' + }) { + const {data, error} = useSWR(endpoint, fetcher) + if (error) return
Error occurred
+ return ( +
+ {data ? ( +
- if (error) return
Error occurred
+ +
- return ( - <> - {data ? ( -
- -
- {renderResults( - sliceArray(data.results || [], limit), - Component, - media_type + {renderResults( + sliceArray(data.results || [], limit), + Component, + media_type + )} +
+
+ ) : ( + )} -
-
- ) : ( - - )} - - ) +
+ ) } diff --git a/components/CollectionContinueWatching.js b/components/CollectionContinueWatching.js new file mode 100644 index 0000000..fdb97ea --- /dev/null +++ b/components/CollectionContinueWatching.js @@ -0,0 +1,137 @@ +import {useEffect, useState} from "react"; +import CardContinueWatching from "./CardContinueWatching"; +import {TMDB_IMAGE_ENDPOINT} from "../utils"; +import {useRouter} from "next/router"; +import Heading from "./Heading"; +import Loading from "./Loading"; + + +export default function Collection({}) { + const [data, setData] = useState([]); + const router = useRouter(); + const [dataLoaded, setDataLoaded] = useState(false) + const [dataEmpty, changeDataStatus] = useState(false) + const clear = () => { + setData([]); + changeDataStatus(true); + if (localStorage) { + 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")) { + 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: 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]}`, { + 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) + } + } else { + setDataLoaded(true) + changeDataStatus(true) + } + } + res(); + } + , + [dataLoaded] + ) + ; + return ( +
+ {dataLoaded ? ( + !dataEmpty ? +
+ +
+
    + { + data.map((data, index) => { + return (
  • + +
    • + ) + }) + } + +
+
+
+ : "" + ) : } +
+ ) +} diff --git a/components/FilmHeading.js b/components/FilmHeading.js index f577a4c..f34d95b 100644 --- a/components/FilmHeading.js +++ b/components/FilmHeading.js @@ -1,10 +1,17 @@ -export default function FilmHeading({ tagline, title }) { +export default function FilmHeading({ tagline, title ,from}) { return ( -
+ from === "movie"? +

{title}

{tagline}

-
+
: +
+

{title}

+

+ {tagline} +

+
) } diff --git a/components/FilmResources.js b/components/FilmResources.js index 0d97f33..527c4c2 100644 --- a/components/FilmResources.js +++ b/components/FilmResources.js @@ -1,7 +1,5 @@ -/* eslint-disable react-hooks/exhaustive-deps */ import { useRouter } from 'next/router' -import { useState } from 'react' -import { FaImdb, FaLink, FaPlay } from 'react-icons/fa' +import { FaPlay } from 'react-icons/fa' import {BsDownload} from "react-icons/bs"; @@ -17,8 +15,6 @@ const handlegetLink =()=>{ return (
- - {!props?.imdb ? null : ( { {!(props?.imdb||props?.tmdb) ? null : ( { if(router?.pathname==="/tv/[id]"){ router.push(`/play/tv/?${props?.tmdb?(`tmdb=${props?.tmdb}`):(`id=${props?.imdb}`)}`) diff --git a/components/Heading.js b/components/Heading.js index 4dc5123..20644f5 100644 --- a/components/Heading.js +++ b/components/Heading.js @@ -1,34 +1,43 @@ import Link from 'next/link' + export default function Heading({ - href, - isHomePage, - isTrending, // TODO: Do we need this here? - media_type, - title, -}) { - return ( -
- {isHomePage ? ( -
-

{title}

- {media_type&&

- { media_type} -

} + href, + isHomePage, + isTrending, // TODO: Do we need this here? + media_type, + clearHistoryFunction, + iscontinue_watching, + title, + }) { + return ( +
+ {isHomePage ? ( +
+

{title}

+ {media_type &&

+ {media_type} +

} +
+ ) : ( +

{title}

+ )} + {iscontinue_watching && +
+ Clear history +
+ } + {href && + + See more + + }
- ) : ( -

{title}

- )} - { href&& - - See more - - } -
- ) + ) } diff --git a/components/Navigation.js b/components/Navigation.js index aa05be2..0f9a7aa 100644 --- a/components/Navigation.js +++ b/components/Navigation.js @@ -1,7 +1,6 @@ import Link from 'next/link' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' -import AppIcon from './icons/AppIcon' import AppLogo from './icons/AppIcon' import IconNavHome from './icons/IconNavHome' import IconNavMovie from './icons/IconNavMovie' @@ -27,7 +26,7 @@ export default function Navigation() { } return ( -