diff --git a/Common/Card.js b/Common/Card.js index 0ce978d..1591e2b 100644 --- a/Common/Card.js +++ b/Common/Card.js @@ -1,5 +1,6 @@ -import React from 'react'; -import {useRouter } from 'next/router'; +import React from 'react' +import { useRouter } from 'next/router' +import { useTheme } from 'next-themes' function formatBytes(bytes, decimals = 1) { if (!+bytes) return '0 Bytes' @@ -12,46 +13,85 @@ function formatBytes(bytes, decimals = 1) { return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` } +function cleanMovieNames(movieName) { + const pattern = + /(2160p|1080p|720p|360p|4320p|H265|BluRay|Rip|10 bit|DV|HDR10|ita|eng|AC3|5\.1|sub|Licdom|UpScaled|5 1|su)/gi + const cleanedNames = movieName.replace(pattern, '').trim() -const Card = (props) => { - const router = useRouter(); - let name = props.item[`name`]; - let time = new Date(props.item[`timestamp`]); + return cleanedNames +} + +const Card = props => { + const router = useRouter() + const { theme, setTheme } = useTheme() + let name = props.item[`name`] + let time = new Date(props.item[`timestamp`]) return ( -
{ - if(props?.page ==="dashboard" || props?.blur){ - return; - } - let slug = name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, ''); - router.push(`/post-detail/${props.item?.eid}/${slug}/`) - }} key={props.index} style={{marginBottom:"10px"}} className={`my-2 overflow-hidden w-full ${props?.page ==="dashboard"?"":"cursor-pointer"} py-2 bg-card rounded-md flex justify-center hover:bg-primary/10 hover:border-primary/50 flex-col md:flex-row `}> -
-
-
- -
- - {props?.item?.name} - -
-
- -
- - {props.item['c'] || props.categoryId} - - - - {time.getDate()||""}-{time.getMonth()+1||""}-{time.getFullYear()||""} - - - - {formatBytes(props.item['size'])} - - {props?.page ==="dashboard"? {router.push(`/upload?data=${JSON.stringify(props?.item)}`)}} className='font-light cursor-pointer text-primary' >Edit:null} -
-
); -}; +
{ + if (props?.page === 'dashboard' || props?.blur) { + return + } + let slug = name + .toLowerCase() + .trim() + .replace(/[^\w\s-]/g, '') + .replace(/[\s_-]+/g, '-') + .replace(/^-+|-+$/g, '') + router.push(`/post-detail/${props.item?.eid}/${slug}/`) + }} + key={props.index} + style={{ marginBottom: '20px' }} + className={` my-2 ${ + props?.page === 'dashboard' ? '' : 'cursor-pointer' + } ${ + theme === 'dark' ? 'bg-card' : 'bg-app-shady-white' + } hover_effect flex w-full flex-col justify-center !overflow-visible rounded-md py-2 hover:border-primary/50 hover:bg-primary/50 md:flex-row `}> +
+
-export default Card; +
+ {cleanMovieNames(props?.item?.name)} +
+
+ +
+ {props.item['c'] || props.categoryId} + + + {time.getDate() || ''}-{time.getMonth() + 1 || ''}- + {time.getFullYear() || ''} + + + {formatBytes(props.item['size'])} + {props?.page === 'dashboard' ? ( + { + router.push(`/upload?data=${JSON.stringify(props?.item)}`) + }} + className='cursor-pointer font-light text-primary'> + Edit + + ) : null} +
+
+ ) +} + +export default Card diff --git a/Common/CardCompact.js b/Common/CardCompact.js index 88c7faa..bc3c737 100644 --- a/Common/CardCompact.js +++ b/Common/CardCompact.js @@ -1,5 +1,6 @@ -import React from 'react'; -import {useRouter } from 'next/router'; +import React from 'react' +import { useRouter } from 'next/router' +import { useTheme } from 'next-themes' function formatBytes(bytes, decimals = 1) { if (!+bytes) return '0 Bytes' @@ -13,44 +14,62 @@ function formatBytes(bytes, decimals = 1) { return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` } - -const CardCompact = (props) => { - const router = useRouter(); - let name = props.item[`n`]; - let time = new Date(props.item[`a`]*1000); +const CardCompact = props => { + const router = useRouter() + const { theme, setTheme } = useTheme() + let name = props.item[`n`] + let time = new Date(props.item[`a`] * 1000) return ( -
{ - let slug = name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, ''); - router.push(`/post-detail/${props.item?.pk}/${slug}/`) - }} key={props.index} style={{marginBottom:"10px"}} className={`my-2 overflow-hidden w-full ${props?.page ==="dashboard"?"":"cursor-pointer"} py-2 bg-card rounded-md flex justify-center hover:bg-primary/10 hover:border-primary/50 flex-col md:flex-row`}> +
{ + let slug = name + .toLowerCase() + .trim() + .replace(/[^\w\s-]/g, '') + .replace(/[\s_-]+/g, '-') + .replace(/^-+|-+$/g, '') + router.push(`/post-detail/${props.item?.pk}/${slug}/`) + }} + key={props.index} + style={{ marginBottom: '10px' }} + className={`my-2 w-full overflow-visible ${ + props?.page === 'dashboard' ? '' : 'cursor-pointer' + } py-2 ${ + theme === 'dark' ? 'bg-card' : 'bg-app-shady-white' + } hover_effect flex flex-col justify-center rounded-md hover:border-primary/50 hover:dark:bg-app-dark-blue md:flex-row`}> +
+
-
-
-
+
+ {name} +
+
-
- - {name} - -
+
+ {props.item['c'] || props.categoryId} + ・ + + {time.getDate()}-{time.getMonth() + 1}-{time.getFullYear()} + + ・ + {formatBytes(props.item['s'])} +
+ ) +} - -
- - {props.item['c'] || props.categoryId} - - ・ - - {time.getDate()}-{time.getMonth()+1}-{time.getFullYear()} - - ・ - - {formatBytes(props.item['s'])} - -
-
- ); -}; - -export default CardCompact; +export default CardCompact diff --git a/Common/CardExpanded.js b/Common/CardExpanded.js index 5c7d3db..c952ce2 100644 --- a/Common/CardExpanded.js +++ b/Common/CardExpanded.js @@ -1,5 +1,6 @@ -import React from 'react'; -import {useRouter } from 'next/router'; +import React from 'react' +import { useRouter } from 'next/router' +import { useTheme } from 'next-themes' export function formatBytes(bytes, decimals = 1) { if (!+bytes) return '0 Bytes' @@ -13,39 +14,57 @@ export function formatBytes(bytes, decimals = 1) { return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` } - - -const CardExpanded = (props) => { - const router = useRouter(); - let name = props.item[`n`]; - let time = new Date(props.item[`a`]*1000); +const CardExpanded = props => { + const router = useRouter() + const { theme, setTheme } = useTheme() + let name = props.item[`n`] + let time = new Date(props.item[`a`] * 1000) return ( -
{ - let slug = name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, ''); - router.push(`/post-detail/${props.item?.pk}/${slug}/`) - }} key={props.index} className="my-3 overflow-hidden mt-6 cursor-pointer py-2 bg-card rounded-md flex-col justify-center inline-flex hover:bg-primary/10 hover_effect hover:border-primary/50 fab zoomcss" style={{width:"200px"}}> -
+
{ + let slug = name + .toLowerCase() + .trim() + .replace(/[^\w\s-]/g, '') + .replace(/[\s_-]+/g, '-') + .replace(/^-+|-+$/g, '') + router.push(`/post-detail/${props.item?.pk}/${slug}/`) + }} + key={props.index} + 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' }}> +
+
+
+ {name} +
+
+ {props.item['c'] || props.categoryId} + ・ + + {time.getDate()}-{time.getMonth() + 1}-{time.getFullYear()} + + ・ + {formatBytes(props.item['s'])} +
-
-
- - {name} - -
-
- - {props.item['c'] || props.categoryId} - - ・ - - {time.getDate()}-{time.getMonth()+1}-{time.getFullYear()} - - ・ - - {formatBytes(props.item['s'])} - -
-
); -}; + ) +} -export default CardExpanded; +export default CardExpanded diff --git a/Common/CardGrid.js b/Common/CardGrid.js index 19097d8..0fc7d72 100644 --- a/Common/CardGrid.js +++ b/Common/CardGrid.js @@ -1,5 +1,7 @@ -import React from 'react'; -import {useRouter } from 'next/router'; +import React, { useEffect } from 'react' +import { useRouter } from 'next/router' +import { useTheme } from 'next-themes' + export function formatBytes(bytes, decimals = 1) { if (!+bytes) return '0 Bytes' @@ -12,45 +14,61 @@ export function formatBytes(bytes, decimals = 1) { return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` } - - -const CardExpanded = (props) => { - console.log("pp",props?.blur) - const router = useRouter(); - let name = props.item[`name`]; - let time = new Date(props.item[`timestamp`]); +const CardExpanded = props => { + const { theme, setTheme } = useTheme() + const router = useRouter() + let name = props.item[`name`] + let time = new Date(props.item[`timestamp`]) return ( -
{ - - if( props?.blur==true){ - props?.setBlur(false) - return; - } - let slug = name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, ''); - router.push(`/post-detail/${props.item?.eid}/${slug}/`) - }} key={props.index} className="my-3 mt-6 zoom overflow-hidden cursor-pointer py-2 bg-card rounded-md fab flex-col justify-center inline-flex hover:bg-primary/10 hover_effect hover:border-primary/50 zoomcss" style={{width:"200px"}}> -
+
{ + if (props?.blur == true) { + props?.setBlur(false) + return + } + let slug = name + .toLowerCase() + .trim() + .replace(/[^\w\s-]/g, '') + .replace(/[\s_-]+/g, '-') + .replace(/^-+|-+$/g, '') + router.push(`/post-detail/${props.item?.eid}/${slug}/`) + }} + key={props.index} + className={`zoom grid_hover_effect my-3 mt-6 scale-125 cursor-pointer overflow-hidden py-2 ${ + theme === 'dark' ? 'bg-app-semi-dark-blue' : 'bg-app-shady-white' + } fab zoomcss inline-flex flex-col justify-center rounded-md hover:border-primary/50 hover:dark:bg-primary/10 `} + style={{ width: '200px' }}> +
+
+
+ {props?.item?.name} +
+
+ {props.item['c'] || props.categoryId} + ・ + + {time.getDate()}-{time.getMonth() + 1}-{time.getFullYear()} + + ・ + {formatBytes(props.item['size'] || props.item['s'])} +
-
-
- - {props?.item?.name} - -
-
- - {props.item['c'] || props.categoryId} - - ・ - - {time.getDate()}-{time.getMonth()+1}-{time.getFullYear()} - - ・ - - {formatBytes(props.item['size']||props.item['s'])} - -
-
); -}; + ) +} -export default CardExpanded; +export default CardExpanded diff --git a/Common/Header.js b/Common/Header.js index 95a3dd9..346b4bc 100644 --- a/Common/Header.js +++ b/Common/Header.js @@ -46,11 +46,7 @@ useEffect(()=>{ },[]) return (
-
- - - - +
route.push("/")}>theRARBG
@@ -81,7 +77,7 @@ useEffect(()=>{ }} >{token?"Logout":"Login"}
{/*Mobile Hamburger Menu */} -
+
route.push("/")}>theRARBG The Navigation Icon setShowNav(!showNav)}/> diff --git a/Common/TorrentList.js b/Common/TorrentList.js index aa1adf8..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? @@ -225,7 +197,7 @@ const TorrentList = ({ setisTorrent, torrent_list, runtime }) => { -              }} className={`my-3 cursor-pointer  w-[]   py-2 bg-card rounded-md flex justify-center hover:bg-primary/10 border border-off-white/5 hover:border-primary/50 flex-col  md:flex-row`}> +              }} className={`my-3 cursor-pointer  w-[]   py-2 dark:bg-card bg-white rounded-md flex justify-center hover:bg-primary/10 border border-off-white/5 hover:border-primary/50 flex-col  md:flex-row`}>               
@@ -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/README.md b/README.md index 0b9a2ef..2eb99f3 100755 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ # PM2 Deployment ``` +npm run build pm2 start npm --name prod -- run "start" ``` # For DEV @@ -32,4 +33,4 @@ npm run dev - [ ] Add a bookmark page to store the user's favorite movies and tv shows - [ ] Add the video playing feature when the user hover over the card and play the video -- [ ] Add authentication so that the user can sign up and log in to save their favorite movies and tv shows permanently \ No newline at end of file +- [ ] Add authentication so that the user can sign up and log in to save their favorite movies and tv shows permanently diff --git a/SVG/search.js b/SVG/search.js index 9ac1e59..0b43f1d 100644 --- a/SVG/search.js +++ b/SVG/search.js @@ -3,7 +3,7 @@ import React from "react"; export const SearchSVG = () => { return ( - + ); }; diff --git a/components/CardContinueWatching.js b/components/CardContinueWatching.js new file mode 100644 index 0000000..1386040 --- /dev/null +++ b/components/CardContinueWatching.js @@ -0,0 +1,62 @@ +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(`/play/movies?id=${id}`) + } else if (category === 'tv') { + if (id.includes('tt')) + window.open(`/play/tv?id=${id}`) + else + window.open(`/play/tv?tmdb=${id}`) + } + } else { + if (category === 'movie') { + router.push(`/play/movies?id=${id}`) + } else if (category === 'tv') { + if (id.includes('tt')) + router.push(`/play/tv?id=${id}`) + else + router.push(`/play/tv?tmdb=${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/CardGenre.js b/components/CardGenre.js index 2ecf9c4..465ca46 100644 --- a/components/CardGenre.js +++ b/components/CardGenre.js @@ -1,13 +1,13 @@ import React from 'react' const CardGenre = React.forwardRef( - ({ oddBgColor = 'odd:bg-app-greyish-blue', onClick, href, text }, ref) => { + ({ oddBgColor = 'dark:odd:bg-app-greyish-blue ', onClick, href, text }, ref) => { return ( {text} diff --git a/components/CardImage.js b/components/CardImage.js index e0d00ba..ed96fea 100644 --- a/components/CardImage.js +++ b/components/CardImage.js @@ -24,7 +24,7 @@ export default function CardImage({ isTrending, src, alt }) { />
{/* TODO: Add this back only after the bookmark feature is implemented */} - {/*
+ {/*
*/}
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 d992761..9351105 100644 --- a/components/CardInfo.js +++ b/components/CardInfo.js @@ -12,7 +12,7 @@ export default function CardInfo({
@@ -20,7 +20,7 @@ export default function CardInfo({ className={ isTrending ? 'mt-2 mb-1 flex text-[11px] font-light text-app-pure-white md:text-[15px]' - : 'mt-2 mb-1 flex text-[11px] font-light text-app-grey md:text-[13px]' + : 'mt-2 mb-1 flex text-[11px] font-light text-black dark:text-app-pure-white md:text-[15px]' } >

{renderYear(year)}

@@ -43,7 +43,7 @@ export default function CardInfo({ className={ isTrending ? 'md:heading-sm text-ellips w-[200px] truncate text-sm font-bold capitalize text-app-pure-white sm:w-[420px] md:h-6' - : 'md:heading-xs text-ellips w-[150px] truncate text-sm font-bold capitalize text-app-pure-white sm:w-[180px] md:w-[200px] lg:w-[268px]' + : 'md:heading-xs text-ellips w-[150px] truncate text-sm font-bold capitalize text-black dark:text-app-pure-white sm:w-[180px] md:w-[200px] lg:w-[268px]' } > {title} @@ -52,7 +52,7 @@ export default function CardInfo({ ) } -function renderYear(year) { +export function renderYear(year) { if (!year) { return 'N/A' } else { @@ -60,15 +60,15 @@ function renderYear(year) { } } -function renderCategoryIcon(category) { +export function renderCategoryIcon(category) { if (category === 'movie') { - return + return } else { return } } -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..37aaedb 100644 --- a/components/CardNormal.js +++ b/components/CardNormal.js @@ -5,17 +5,25 @@ 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 (
{ - 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 8365b38..38af717 100644 --- a/components/Collection.js +++ b/components/Collection.js @@ -1,57 +1,56 @@ import useSWR from 'swr' -import { getUrl2 } from '../lib/tmdb' -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..5d1cfa8 --- /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)); + } + } + + } + /*Note : 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 + ` 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' + }); + }) + } + 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/FilmCasts.js b/components/FilmCasts.js index 229acd8..8f099a9 100644 --- a/components/FilmCasts.js +++ b/components/FilmCasts.js @@ -17,7 +17,7 @@ function renderCasts(arr) { return (
  • {cast.name}
    • diff --git a/components/FilmGenres.js b/components/FilmGenres.js index 2783a0e..b643035 100644 --- a/components/FilmGenres.js +++ b/components/FilmGenres.js @@ -15,7 +15,7 @@ function renderGenres(arr) { return (
  • {genre.name}
    • diff --git a/components/FilmHeading.js b/components/FilmHeading.js index aca2499..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/FilmInfo.js b/components/FilmInfo.js index ea175b7..26f30d6 100644 --- a/components/FilmInfo.js +++ b/components/FilmInfo.js @@ -10,41 +10,41 @@ export default function FilmInfo({ return ( <> {media_type === 'movie' ? ( -
    +
    -

    Length

    -

    {length}

    +

    Length

    +

    {length.split("?")[0]}

    -

    Language

    -

    {language}

    +

    Language

    +

    {language}

    -

    Year

    -

    {year}

    +

    Year

    +

    {year}

    -

    Status

    -

    {status}

    +

    Status

    +

    {status}

    ) : ( -
    +
    -

    Language

    -

    {language}

    +

    Language

    +

    {language}

    -

    First Air

    -

    {firstAir}

    +

    First Air

    +

    {firstAir}

    -

    Last Air

    -

    {lastAir}

    +

    Last Air

    +

    {lastAir}

    -

    Status

    -

    {status}

    +

    Status

    +

    {status}

    )} diff --git a/components/FilmResources.js b/components/FilmResources.js index 829992d..527c4c2 100644 --- a/components/FilmResources.js +++ b/components/FilmResources.js @@ -1,13 +1,12 @@ -/* 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"; const FilmResources = (props)=> { const router = useRouter() -const [loader,setLoader]=useState(false) + const handlegetLink =()=>{ props?.handleClose() } @@ -16,34 +15,51 @@ const handlegetLink =()=>{ return (
    - - {!props?.imdb ? null : ( handlegetLink()} + className='mb-4 mr-4 flex w-40 cursor-pointer items-center justify-between rounded-md border-none bg-app-dark-blue dark:bg-app-greyish-blue py-3 px-8 text-sm font-light text-app-pure-white hover:bg-app-dark-blue hover:text-blue-300 dark:hover:bg-light-white dark:hover:text-app-dark-blue' + + rel='noreferrer' + > + +

    Download

    + +     + )} + + {!(props?.imdb||props?.tmdb) ? null : ( + { + if(router?.pathname==="/tv/[id]"){ + router.push(`/play/tv/?${props?.tmdb?(`tmdb=${props?.tmdb}`):(`id=${props?.imdb}`)}`) + } + else{ + router.push(`/play/movies/?${props?.tmdb?(`tmdb=${props?.tmdb}`):(`id=${props?.imdb}`)}`) + } + + }} className='mb-4 mr-4 flex w-40 cursor-pointer items-center justify-between rounded-md border-none bg-app-greyish-blue py-3 px-8 text-sm font-light text-app-pure-white hover:bg-app-pure-white hover:text-app-dark-blue' rel='noreferrer' > -

    Download

    - + +

    Play Now

    +     )} - - - - {!props?.imdb ? null : ( + {/* {!props?.imdb ? null : (

    IMDB

     - )} + )} */} {/* diff --git a/components/Heading.js b/components/Heading.js index d607c17..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 ? ( - - ) + ) } diff --git a/components/Layout.js b/components/Layout.js index 4b8e201..5b5ecbe 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -1,11 +1,13 @@ import Footer from './Footer' import Navigation from './Navigation' +import { ThemeToggler } from './ThemeToggler' export default function Layout({ children }) { return ( -
    +
    -
    + +
    {children}
    diff --git a/components/Navigation.js b/components/Navigation.js index d0a9d71..d8ed2f2 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' @@ -9,6 +8,8 @@ import IconNavTv from './icons/IconNavTv' import NavigationIcon from './NavigationIcon' import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' +import { MdOutlineArrowBackIos } from 'react-icons/md' +import {ThemeToggler} from "./ThemeToggler"; export default function Navigation() { const router = useRouter() @@ -17,15 +18,189 @@ export default function Navigation() { let temp = localStorage.getItem('access_token') || false setToken(temp) }, []) + + //SideBar Hook + const [isOpen, setIsOpen] = useState(false) + const toggleSidebar = () => { + setIsOpen(!isOpen) + } + return ( -