Merge pull request #81 from rcl-viveksharma/tracker_issue

Tracker issue

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 (
-  <div onClick={()=>{
-    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 `}>
-    <div className='flex  p-2'>
-    <div className="imagefit bg-cover rounded mx-auto justify-center items-center inline-flex ml-2" style={{'backgroundImage':`url("${props.item[`thumbnail`] ? props.item[`thumbnail`] : props.categoryId==="XXX"?"https://i.therarbg.com/xnp.jpg": "https://i.therarbg.com/np.jpg"}")`,width:"50px",height:"50px"}}>
-    </div>
-   
-      <div className="text-off-white flex items-center text-[14px] w-[90%] text-left h-auto pt-1.5 text-ellipsis overflow-hidden pl-4 font-medium break-all">
-      
-        {props?.item?.name}
-     
-    </div>
-    </div>
-   
-    <div className="flex shift-right  items-center  text-off-white text-[14px] h-auto pt-1.5 long-and-truncated font-light gap-4 " style={{fontSize:"12px"}}>
-      <span className='w-14'>
-        {props.item['c'] || props.categoryId}
-      </span>
-     
-      <span className='w-14'>
-        {time.getDate()||""}-{time.getMonth()+1||""}-{time.getFullYear()||""}
-      </span>
-     
-      <span className='w-14'>
-        {formatBytes(props.item['size'])}
-      </span>
-     {props?.page ==="dashboard"?  <span onClick={()=>{router.push(`/upload?data=${JSON.stringify(props?.item)}`)}} className='font-medium cursor-pointer text-primary' >Edit</span>:null}
-    </div>
-  </div>);
-};
+    <div
+      onClick={() => {
+        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 `}>
+      <div className='flex  p-2'>
+        <div
+          className='imagefit  mx-auto ml-2 inline-flex items-center justify-center rounded bg-cover'
+          style={{
+            backgroundImage: `url("${
+              props.item[`thumbnail`]
+                ? props.item[`thumbnail`]
+                : props.categoryId === 'XXX'
+                ? 'https://i.therarbg.com/xnp.jpg'
+                : 'https://i.therarbg.com/np.jpg'
+            }")`,
+            width: '50px',
+            height: '50px',
+          }}></div>
 
-export default Card;
+        <div
+          className={`flex  h-auto w-[90%] items-center overflow-visible  text-ellipsis break-all pl-4 pt-1.5 text-left text-[14px] font-light text-black  dark:text-white `}>
+          {cleanMovieNames(props?.item?.name)}
+        </div>
+      </div>
+
+      <div
+        className='shift-right long-and-truncated  flex  h-auto items-center gap-4 pt-1.5 text-[14px] font-light text-app-dark-blue dark:text-white'
+        style={{ fontSize: '12px' }}>
+        <span className='w-14'>{props.item['c'] || props.categoryId}</span>
+
+        <span className='w-14'>
+          {time.getDate() || ''}-{time.getMonth() + 1 || ''}-
+          {time.getFullYear() || ''}
+        </span>
+
+        <span className='w-14'>{formatBytes(props.item['size'])}</span>
+        {props?.page === 'dashboard' ? (
+          <span
+            onClick={() => {
+              router.push(`/upload?data=${JSON.stringify(props?.item)}`)
+            }}
+            className='cursor-pointer font-light text-primary'>
+            Edit
+          </span>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default Card

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 (
-  <div onClick={()=>{
-    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`}>
+    <div
+      onClick={() => {
+        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`}>
+      <div className='flex p-2'>
+        <div
+          className='imagefit  mx-auto ml-2 inline-flex items-center justify-center rounded bg-cover'
+          style={{
+            backgroundImage: `url("${
+              props.item[`t`]
+                ? props.item[`t`]
+                : props.categoryId === 'XXX'
+                ? 'https://i.therarbg.com/xnp.jpg'
+                : 'https://i.therarbg.com/np.jpg'
+            }")`,
+            width: '50px',
+            height: '50px',
+          }}></div>
 
-    <div className='flex p-2'>
-     <div className="bg-cover imagefit rounded mx-auto justify-center items-center inline-flex ml-2" style={{'backgroundImage':`url("${props.item[`t`] ? props.item[`t`] : props.categoryId==="XXX"?"https://i.therarbg.com/xnp.jpg": "https://i.therarbg.com/np.jpg"}")`, width:"50px",height:"50px"}}>
-     </div>
+        <div className='line-clamp-1 flex h-auto w-full items-center overflow-visible  text-ellipsis break-all pl-4 pt-1.5 text-left text-[13px] font-extralight '>
+          <span className='text-black dark:text-white'>{name}</span>
+        </div>
+      </div>
 
-      <div className="text-off-white  w-full text-[12px] text-left h-auto pt-1.5 text-ellipsis overflow-hidden pl-4 font-medium break-all">
-      <span>
-        {name}
-      </span>
-     </div>
+      <div
+        className='shift-right long-and-truncated   flex h-auto items-center gap-4 pt-1.5 font-extralight text-black dark:text-white'
+        style={{ fontSize: '14px' }}>
+        <span className='w-14'>{props.item['c'] || props.categoryId}</span>
+        <span>・</span>
+        <span className='w-14'>
+          {time.getDate()}-{time.getMonth() + 1}-{time.getFullYear()}
+        </span>
+        <span>・</span>
+        <span className='w-14'>{formatBytes(props.item['s'])}</span>
+      </div>
     </div>
+  )
+}
 
-
-    <div className="flex text-off-white   h-auto pt-1.5 shift-right long-and-truncated font-light gap-4" style={{fontSize:"12px"}}>
-      <span className='w-14'>
-        {props.item['c'] || props.categoryId}
-      </span>
-      <span>・</span>
-      <span className='w-14'>
-        {time.getDate()}-{time.getMonth()+1}-{time.getFullYear()}
-      </span>
-      <span>・</span>
-      <span className='w-14'>
-        {formatBytes(props.item['s'])}
-      </span>
-    </div>
-  </div>
-  );
-};
-
-export default CardCompact;
+export default CardCompact

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 (
-  <div onClick={()=>{
-    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"}}>
-    <div className="w-40 h-44  bg-cover imagefit rounded mx-auto justify-center items-center inline-flex" style={{'backgroundImage':`url("${props.item[`t`] ? props.item[`t`] : props.categoryId==="XXX"?"https://i.therarbg.com/xnp.jpg": "https://i.therarbg.com/np.jpg"}")`}}>
+    <div
+      onClick={() => {
+        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' }}>
+      <div
+        className='imagefit mx-auto  inline-flex h-44 w-44 items-center justify-center rounded bg-cover '
+        style={{
+          backgroundImage: `url("${
+            props.item[`t`]
+              ? props.item[`t`]
+              : props.categoryId === 'XXX'
+              ? 'https://i.therarbg.com/xnp.jpg'
+              : 'https://i.therarbg.com/np.jpg'
+          }")`,
+        }}></div>
+      <br />
+      <div
+        className='long-and-truncated h-auto w-fit break-all pt-1.5 text-[12px] font-light text-black dark:text-white'
+        style={{ fontSize: '12px' }}>
+        <span>{name}</span>
+      </div>
+      <div
+        className='long-and-truncated flex h-auto justify-between pt-1.5 text-[10px] font-light text-black dark:text-white'
+        style={{ fontSize: '10px' }}>
+        <span>{props.item['c'] || props.categoryId}</span>
+        <span>・</span>
+        <span>
+          {time.getDate()}-{time.getMonth() + 1}-{time.getFullYear()}
+        </span>
+        <span>・</span>
+        <span>{formatBytes(props.item['s'])}</span>
+      </div>
     </div>
-    <br />
-      <div className="text-off-white text-[12px] h-auto pt-1.5 long-and-truncated font-medium w-fit break-all" style={{fontSize:"12px"}}>
-      <span>
-        {name}
-      </span>
-    </div>
-    <div className="flex text-off-white text-[10px] h-auto pt-1.5 long-and-truncated font-light justify-between" style={{fontSize:"10px"}}>
-      <span >
-        {props.item['c'] || props.categoryId}
-      </span>
-      <span>・</span>
-      <span >
-        {time.getDate()}-{time.getMonth()+1}-{time.getFullYear()}
-      </span>
-      <span>・</span>
-      <span >
-        {formatBytes(props.item['s'])}
-      </span>
-    </div>
-  </div>);
-};
+  )
+}
 
-export default CardExpanded;
+export default CardExpanded

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 (
-  <div onClick={()=>{
-   
-    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"}}>
-    <div className="w-40 h-44 bg-cover imagefit rounded mx-auto justify-center items-center inline-flex" style={{'backgroundImage':`url("${props.item[`thumbnail`] ? props.item[`thumbnail`] : props.categoryId==="XXX"?"https://i.therarbg.com/xnp.jpg": "https://i.therarbg.com/np.jpg"}")`}}>
+    <div
+      onClick={() => {
+        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' }}>
+      <div
+        className='imagefit mx-auto inline-flex h-44 w-40 items-center justify-center rounded bg-cover brightness-100'
+        style={{
+          backgroundImage: `url("${
+            props.item[`thumbnail`]
+              ? props.item[`thumbnail`]
+              : props.categoryId === 'XXX'
+              ? 'https://i.therarbg.com/xnp.jpg'
+              : 'https://i.therarbg.com/np.jpg'
+          }")`,
+        }}></div>
+      <br />
+      <div
+        className='k long-and-truncated h-auto w-fit break-all pt-1.5 font-light text-black hover:text-app-dark-blue dark:text-white '
+        style={{ fontSize: '12px' }}>
+        <span>{props?.item?.name}</span>
+      </div>
+      <div
+        className='s long-and-truncated flex h-auto justify-between pt-1.5 font-light text-black hover:text-app-dark-blue dark:text-white '
+        style={{ fontSize: '10px' }}>
+        <span>{props.item['c'] || props.categoryId}</span>
+        <span>・</span>
+        <span>
+          {time.getDate()}-{time.getMonth() + 1}-{time.getFullYear()}
+        </span>
+        <span>・</span>
+        <span>{formatBytes(props.item['size'] || props.item['s'])}</span>
+      </div>
     </div>
-    <br />
-      <div className="text-off-white  h-auto pt-1.5 long-and-truncated font-medium w-fit break-all" style={{fontSize:"12px"}}>
-      <span>
-      {props?.item?.name}
-      </span>
-    </div>
-    <div className="flex text-off-white  h-auto pt-1.5 long-and-truncated font-light justify-between" style={{fontSize:"10px"}}>
-      <span >
-        {props.item['c'] || props.categoryId}
-      </span>
-      <span>・</span>
-      <span >
-        {time.getDate()}-{time.getMonth()+1}-{time.getFullYear()}
-      </span>
-      <span>・</span>
-      <span >
-        {formatBytes(props.item['size']||props.item['s'])}
-      </span>
-    </div>
-  </div>);
-};
+  )
+}
 
-export default CardExpanded;
+export default CardExpanded

Common/Header.js

@@ -46,11 +46,7 @@ useEffect(()=>{
 },[])
   return (
     <div className=''>
-    <header className="hidden bg-background-header/25 text-sm font-medium md:flex sticky top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 justify-between">
-
-
-
-    
+    <header className="hidden dark:bg-background-header/25 bg-white text-sm font-light md:flex sticky top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 justify-between">
       <span className='mx-6 cursor-pointer hover:text-green-400 text-xl font-semibold my-4' onClick={()=>route.push("/")}>theRARBG</span>
 
       <div className='hidden md:flex mx-auto font-normal items-center'>
@@ -81,7 +77,7 @@ useEffect(()=>{
       }}  >{token?"Logout":"Login"}</button>
     </header>
       {/*Mobile Hamburger Menu */}
-      <div className={`${showNav?"h-screen":"h-[60px]"} transition-all ease-in-out duration-500 z-20   md:hidden bg-background-header/25 w-full fixed top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 flex flex-col`}>
+      <div className={`${showNav?"h-screen":"h-[60px]"} transition-all ease-in-out duration-500 z-20   md:hidden bg-white dark:bg-background-header/25 w-full fixed top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 flex flex-col`}>
         <div className='h-[60px] w-full flex justify-between items-center'>
         <span className='mx-6 cursor-pointer hover:text-green-400 text-xl font-semibold' onClick={()=>route.push("/")}>theRARBG</span>
         <img src='/navIcon.png' alt="The Navigation Icon" className='w-8 h-8 cursor-pointer' onClick={() => setShowNav(!showNav)}/>  

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 (
-          <a onClick={() => router.push(`/post-detail/${row?.eid}/${slug}/`)}>
-            Download
-          </a>
-        )
-      },
-      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: "6%",
-      style: {
-        color: "#00FF00",
-
-
-      }
-
-    },
-    {
-      name: 'L',
-      selector: row => row.leechers,
-      sortable: true,
-      width: "6%",
-      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 (
-
-    <>
-
-
-
-      <Modal
-
-        isOpen={true}
-
-        style={customStyles}
-
-        onRequestClose={() => setisTorrent(false)}
-
-      >  {
-
-          torrent_list.length > 0 ?
-
-            <DataTable
-
-              columns={columns}
-
-              data={torrent_list}
-
-              theme="dark"
-
-              sortable
-
-              customStyles={customCss}
-
-            />
-
-            : <div className='nosimilar_torrent text-gray-700 '>
-
-              <h1>
-
-                Sorry Torrent Not Available Try after some days !!!
-
-              </h1>
-
-            </div>}
-
-        {/* {
+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 (
+                    <a onClick={() => router.push(`/post-detail/${row?.eid}/${slug}/`)}>
+                        Download
+                    </a>
+                )
+            },
+            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 (
+                    <span style={{color: "#00FF00"}}>
+              {l} | <span style={{color: "#FF0000"}}>{s}</span>
+            </span>
+                )
+            },
+            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 (
+        <>
+            <Modal
+                isOpen={true}
+                style={customStyles}
+                onRequestClose={() => setisTorrent(false)}>
+                {' '}
+                {torrent_list.length > 0 ? (
+                    <DataTable
+                        columns={columns}
+                        data={torrent_list}
+                        theme={theme}
+                        sortable
+                        customStyles={customCss}
+                    />
+                ) : (
+                    <div className='nosimilar_torrent text-gray-700 '>
+                        <h1>Sorry Torrent Not Available Try after some days !!!</h1>
+                    </div>
+                )}
+                {/* {
 
           torrent_list.length>0?
 
@@ -225,9 +197,9 @@ 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`}>
 
-                <div className="row-custom   text-[14px] justify-end h-auto pt-1.5 text-ellipsis overflow-hidden pl-4 font-medium ">
+                <div className="row-custom   text-[14px] justify-end h-auto pt-1.5 text-ellipsis overflow-hidden pl-4 font-light ">
 
                   <span>
 
@@ -313,17 +285,9 @@ const TorrentList = ({ setisTorrent, torrent_list, runtime }) => {
          </h1>
 
        </div> } */}
-
-
-
-      </Modal>
-
-    </>
-
-  )
-
+            </Modal>
+        </>
+    )
 }
 
-
-
-export default TorrentList
+export default TorrentList

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
+- [ ] Add authentication so that the user can sign up and log in to save their favorite movies and tv shows permanently

SVG/search.js

@@ -3,7 +3,7 @@ import React from "react";
 export const SearchSVG = () => {
   return (
     <svg width="26" height="26" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M36.6667 36.6667L33.3333 33.3334M19.1667 35C21.2459 35 23.3048 34.5905 25.2258 33.7948C27.1468 32.9991 28.8923 31.8328 30.3625 30.3626C31.8328 28.8923 32.9991 27.1468 33.7948 25.2259C34.5905 23.3049 35 21.246 35 19.1667C35 17.0874 34.5905 15.0285 33.7948 13.1076C32.9991 11.1866 31.8328 9.44111 30.3625 7.97085C28.8923 6.50059 27.1468 5.33431 25.2258 4.53861C23.3048 3.74292 21.2459 3.33337 19.1667 3.33337C14.9674 3.33337 10.9401 5.00152 7.9708 7.97085C5.00148 10.9402 3.33333 14.9674 3.33333 19.1667C3.33333 23.366 5.00148 27.3932 7.9708 30.3626C10.9401 33.3319 14.9674 35 19.1667 35Z" stroke="#7AFFB8" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M36.6667 36.6667L33.3333 33.3334M19.1667 35C21.2459 35 23.3048 34.5905 25.2258 33.7948C27.1468 32.9991 28.8923 31.8328 30.3625 30.3626C31.8328 28.8923 32.9991 27.1468 33.7948 25.2259C34.5905 23.3049 35 21.246 35 19.1667C35 17.0874 34.5905 15.0285 33.7948 13.1076C32.9991 11.1866 31.8328 9.44111 30.3625 7.97085C28.8923 6.50059 27.1468 5.33431 25.2258 4.53861C23.3048 3.74292 21.2459 3.33337 19.1667 3.33337C14.9674 3.33337 10.9401 5.00152 7.9708 7.97085C5.00148 10.9402 3.33333 14.9674 3.33333 19.1667C3.33333 23.366 5.00148 27.3932 7.9708 30.3626C10.9401 33.3319 14.9674 35 19.1667 35Z" stroke="#2f6af5" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
     </svg>
   );
 };

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 (
+        <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>
+    )
+}

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 (
       <a
         href={href}
         onClick={onClick}
         ref={ref}
-        className={`card-hover-animation m-2 flex h-44 w-44 grow items-center justify-center rounded-lg p-8 text-center text-xl font-medium even:bg-app-semi-dark-blue ${oddBgColor}`}
+        className={`card-hover-animation m-2 flex h-44 w-44 grow items-center justify-center rounded-lg p-8 text-center text-xl text-pure-white font-light even:bg-gray-600 dark:even:bg-app-semi-dark-blue ${oddBgColor}`}
       >
         {text}
       </a>

components/CardImage.js

@@ -24,7 +24,7 @@ export default function CardImage({ isTrending, src, alt }) {
         />
       </div>
       {/* TODO: Add this back only after the bookmark feature is implemented */}
-      {/* <div className="group absolute top-2 right-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-app-dark-blue opacity-50 hover:bg-app-pure-white hover:opacity-100">
+      {/* <div className="group absolute top-2 right-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-app-dark-blue opacity-50 hover:bg-light-white hover:opacity-100">
         <IconBookmarkEmpty className="group-hover:app-transition fill-transparent stroke-app-pure-white group-hover:stroke-black" />
       </div> */}
     </div>

components/CardImageCW.js

@@ -0,0 +1,30 @@
+import Image from 'next/image'
+import {shimmer, toBase64} from '../utils'
+
+export default function CardImageCW({src, alt}) {
+    return (
+        <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]'
+                }>
+                <Image
+                    className='rounded-lg'
+                    src={src}
+                    alt={alt}
+                    layout='fill'
+                    objectFit='cover'
+                    placeholder='blur'
+                    blurDataURL={`data:image/svg+xml;base64,${toBase64(
+                        shimmer(240, 140)
+                    )}`}
+                    unoptimized
+                />
+            </div>
+            {/* TODO: Add this back only after the bookmark feature is implemented */}
+            {/* <div className="group absolute top-2 right-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-app-dark-blue opacity-50 hover:bg-light-white hover:opacity-100">
+        <IconBookmarkEmpty className="group-hover:app-transition fill-transparent stroke-app-pure-white group-hover:stroke-black" />
+      </div> */}
+        </div>
+    )
+}

components/CardInfo.js

@@ -12,7 +12,7 @@ export default function CardInfo({
     <div
       className={
         isTrending
-          ? 'absolute left-4 bottom-4 z-40 h-fit w-fit truncate text-ellipsis'
+          ? 'absolute left-4 bottom-4 z-40 h-fit w-fit truncate text-ellipsis '
           : null
       }
     >
@@ -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]'
         }
       >
         <p>{renderYear(year)}</p>
@@ -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 <IconCategoryMovie className='pl-1 text-base' />
+    return <IconCategoryMovie className='pl-1 text-base dark:fill-white fill-black ' />
   } else {
     return <IconCategoryTv className='pl-1 text-base' />
   }
 }
 
-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 {

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 (
+        <div
+            className={
+                'absolute left-4 bottom-4 z-40 h-fit w-full truncate text-ellipsis '
+            }
+        >
+            <div
+                className={
+                    'mt-2 mb-1 flex text-[11px] font-light text-app-pure-white md:text-[15px]'
+                }
+            >
+                <p>{renderYear(year)}</p>
+                <div
+                    className={
+                        'flex items-center px-[8px] before:content-["•"]'
+                    }
+                >
+                    {renderCategoryIcon(category)}
+                    <p className={ 'pl-[6px] pr-[6px]' }>
+                        {renderCategoryText(category)}
+                    </p>
+                </div>
+                {/*TODO: Add this back only after I find an appropriate way to get the rating info from TMDB api */}
+                {/*<p>{renderRating(rating)}</p> */}
+            </div>
+            <h2
+                className={
+                    'md:heading-sm text-ellips w-[200px] truncate text-sm font-bold capitalize text-app-pure-white sm:w-[420px] md:h-6'
+                }
+            >
+                {title}
+            </h2>
+        </div>
+    )
+}
+

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 (
     <div
-      className='card-hover-animation mb-4 grow basis-1/5 2xs:w-[130px] xs:w-full cursor-pointer'
+      className='transition duration-300 ease-in-out hover:scale-110 mb-4 grow basis-1/5 2xs:w-[130px] xs:w-full cursor-pointer'
       onClick={handleClick}>
       <CardImage src={src} alt={title} />
       <CardInfo

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 (
-    <div className='relative w-full cursor-pointer' onClick={handleClick}>
-      <CardImage isTrending src={src} alt={title} />
-      <CardInfo
-        isTrending
-        id={id}
-        category={category}
-        rating={rating}
-        title={title}
-        year={year}
-      />
-    </div>
-  )
+    return (
+        <a className='relative w-full top-[100%] cursor-pointer' target={"_blank"} onClick={handleClick}>
+            <CardImage isTrending src={src} alt={title}/>
+            <CardInfo
+                isTrending
+                id={id}
+                category={category}
+                rating={rating}
+                title={title}
+                year={year}
+            />
+        </a>
+    )
 }

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 <div>Error occurred</div>
+    return (
+        <div className={"relative"}>
+            {data ? (
+                <section
+                    className={
+                        isTrending
+                            ? 'mb-6 h-full w-full overflow-hidden md:mb-10 lg:overflow-visible '
+                            : 'mb-6 md:mb-10'
+                    }>
 
-  if (error) return <div>Error occurred</div>
+                    <Heading
+                        title={title}
+                        href={href}
+                        isHomePage={isHomePage}
+                        isTrending={isTrending}
+                        media_type={type}
+                    />
+                    <section
+                        className={
+                            isTrending
+                                ? 'h-scroll relative flex gap-x-4 overflow-x-scroll sm:gap-x-10 2xs:mt-2'
+                                : 'card-collection-wrapper'
+                        }>
 
-  return (
-    <>
-      {data ? (
-        <section
-          className={
-            isTrending
-              ? 'mb-6 h-full w-full overflow-hidden md:mb-10 lg:overflow-visible'
-              : 'mb-6 md:mb-10'
-          }>
-          <Heading
-            title={title}
-            href={href}
-            isHomePage={isHomePage}
-            isTrending={isTrending}
-            media_type={type}
-          />
-          <section
-            className={
-              isTrending
-                ? 'h-scroll relative flex gap-x-4 overflow-x-scroll sm:gap-x-10 2xs:mt-2'
-                : 'card-collection-wrapper'
-            }>
-            {renderResults(
-              sliceArray(data.results || [], limit),
-              Component,
-              media_type
+                        {renderResults(
+                            sliceArray(data.results || [], limit),
+                            Component,
+                            media_type
+                        )}
+                    </section>
+                </section>
+            ) : (
+                <Loading/>
             )}
-          </section>
-        </section>
-      ) : (
-        <Loading />
-      )}
-    </>
-  )
+        </div>
+    )
 }

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 (
+        <div className={"relative"}>
+            {dataLoaded ? (
+                !dataEmpty ?
+                    <section
+                        className={
+                            'mb-6 md:mb-10'
+                        }>
+                        <Heading title={"Continue Watching"} clearHistoryFunction={clear} href={""} isHomePage
+                                 media_type={"all"}
+                                 iscontinue_watching={true}/>
+                        <section
+                            className={
+                                ' w-[100%] gap-5 overflow-x-scroll pb-2 '
+                            }>
+                            <ul className={"flex gap-10 flex-row"}>
+                                {
+                                    data.map((data, index) => {
+                                        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>
+                                        )
+                                    })
+                                }
+
+                            </ul>
+                        </section>
+                    </section>
+                    : ""
+            ) : <Loading/>}
+        </div>
+    )
+}

components/FilmCasts.js

@@ -17,7 +17,7 @@ function renderCasts(arr) {
       return (
         <li
           key={cast.credit_id}
-          className='mr-2 mb-2 flex items-center justify-center rounded-md border-[1px] py-px px-2 text-app-pure-white'
+          className='mr-2 mb-2 flex items-center justify-center rounded-md dark:border-app-pure-white border-app-dark-blue border-[1px] py-px px-2 text-app-dark-blue dark:text-app-pure-white'
         >
           {cast.name}
         </li>

components/FilmGenres.js

@@ -15,7 +15,7 @@ function renderGenres(arr) {
       return (
         <li
           key={genre.id}
-          className='mr-2 mb-2 flex items-center justify-center rounded-md border-none bg-app-pure-white py-px px-2 text-center font-medium text-app-dark-blue'
+          className='mr-2 mb-2 flex items-center justify-center rounded-md border-none bg-app-dark-blue dark:bg-light-white py-px px-2 text-center font-light text-app-pure-white dark:text-app-dark-blue'
         >
           {genre.name}
         </li>

components/FilmHeading.js

@@ -1,10 +1,17 @@
-export default function FilmHeading({ tagline, title }) {
+export default function FilmHeading({ tagline, title ,from}) {
   return (
-    <div className='mt-6 mb-2 text-center md:mt-0 md:mb-4 md:text-left'>
+    from === "movie"?
+    <div className='text-center mb-2 md:text-left'>
       <h1 className='mb-1 text-3xl font-light md:mb-3 md:text-5xl'>{title}</h1>
-      <h2 className='text-xs font-light text-app-placeholder sm:text-sm md:text-lg'>
+      <h2 className='text-xs font-light text-gray-600 dark:text-app-placeholder sm:text-sm md:text-lg'>
         {tagline}
       </h2>
-    </div>
+    </div> :
+        <div className='mt-6 mb-2 text-center md:mt-0 md:mb-4 md:text-left'>
+            <h1 className='mb-1 text-3xl font-light md:mb-3 md:text-5xl'>{title}</h1>
+            <h2 className='text-xs font-light text-gray-600 dark:text-app-placeholder sm:text-sm md:text-lg'>
+                {tagline}
+            </h2>
+        </div>
   )
 }

components/FilmInfo.js

@@ -10,41 +10,41 @@ export default function FilmInfo({
   return (
     <>
       {media_type === 'movie' ? (
-        <div className='mb-6 flex items-center justify-between text-left text-sm lg:w-10/12 lg:text-lg'>
+        <div className='mb-6 flex items-center dark:text-app-placeholder text-app-dark-blue justify-between text-left text-sm lg:w-10/12 lg:text-lg'>
           <div>
-            <p className='mb-1 text-app-placeholder'>Length</p>
-            <p className='text-app-pure-white'>{length}</p>
+            <p className='mb-1 '>Length</p>
+            <p className=''>{length.split("?")[0]}</p>
           </div>
           <div>
-            <p className='mb-1 text-app-placeholder'>Language</p>
-            <p className='text-app-pure-white'>{language}</p>
+            <p className='mb-1 '>Language</p>
+            <p className=''>{language}</p>
           </div>
           <div>
-            <p className='mb-1 text-app-placeholder'>Year</p>
-            <p className='text-app-pure-white'>{year}</p>
+            <p className='mb-1'>Year</p>
+            <p className=''>{year}</p>
           </div>
           <div>
-            <p className='mb-1 text-app-placeholder'>Status</p>
-            <p className='text-app-pure-white'>{status}</p>
+            <p className='mb-1'>Status</p>
+            <p className=''>{status}</p>
           </div>
         </div>
       ) : (
-        <div className='mb-6 flex items-center justify-between text-left text-sm lg:w-11/12 lg:text-lg'>
+        <div className='mb-6 flex items-center justify-between text-left  dark:text-app-placeholder text-app-dark-blue  text-sm lg:w-11/12 lg:text-lg'>
           <div>
-            <p className='mb-1 text-app-placeholder'>Language</p>
-            <p className='text-app-pure-white'>{language}</p>
+            <p className='mb-1 '>Language</p>
+            <p className=''>{language}</p>
           </div>
           <div>
-            <p className='mb-1 text-app-placeholder'>First Air</p>
-            <p className='text-app-pure-white'>{firstAir}</p>
+            <p className='mb-1 '>First Air</p>
+            <p className=''>{firstAir}</p>
           </div>
           <div>
-            <p className='mb-1 text-app-placeholder'>Last Air</p>
-            <p className='text-app-pure-white'>{lastAir}</p>
+            <p className='mb-1 '>Last Air</p>
+            <p className=''>{lastAir}</p>
           </div>
           <div>
-            <p className='mb-1 text-app-placeholder'>Status</p>
-            <p className='text-app-pure-white'>{status}</p>
+            <p className='mb-1 '>Status</p>
+            <p className=''>{status}</p>
           </div>
         </div>
       )}

components/FilmRating.js

@@ -4,7 +4,7 @@ import Rating from 'react-rating'
 export default function FilmRating({ number }) {
   return (
     <div className='mb-6 flex flex-col items-center text-center md:flex-row md:items-center md:text-left'>
-      <p className='mb-2 text-4xl font-medium md:mr-4 md:mb-0'>{number}</p>
+      <p className='mb-2 text-4xl font-light md:mr-4 md:mb-0'>{number}</p>
       <Rating
         className='align-center flex self-center'
         initialRating={number}

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,37 +15,54 @@ const handlegetLink =()=>{
   return (
     
     <div className='mb-10 flex flex-wrap'>
-    
-       
         {!props?.imdb ? null : (
        <a
           
        onClick={()=>handlegetLink()}
-       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-medium text-app-pure-white hover:bg-app-pure-white hover:text-app-dark-blue'
+       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'
      >
+           <BsDownload className={"text-base"}/>
        <p>Download</p>
-       <FaLink className='text-base' />
+     
      </a>
       )}
 
-
-     
-      {!props?.imdb ? null : (
+   {!(props?.imdb||props?.tmdb) ? null : (
+       <a
+       onClick={()=>{
+         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'
+     >
+        <FaPlay className='text-base' />
+       <p>Play Now</p>
+      
+     </a>
+      )}
+      {/* {!props?.imdb ? null : (
         <a
           href={`https://www.imdb.com/title/${props?.imdb}`}
-          className='mb-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-medium text-app-pure-white hover:bg-app-pure-white hover:text-app-dark-blue'
+          className='mb-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-light-white hover:text-app-dark-blue'
           target='_blank'
           rel='noreferrer'
         >
           <p>IMDB</p>
           <FaImdb className='text-base' />
         </a>
-      )}
+      )} */}
       {/* <a
         href={trailer}
-        className="mb-4 flex w-full cursor-pointer items-center justify-between rounded-md border-none bg-app-semi-dark-blue py-4 px-8 text-sm font-medium text-app-pure-white hover:bg-app-greyish-blue">
+        className="mb-4 flex w-full cursor-pointer items-center justify-between rounded-md border-none bg-app-semi-dark-blue py-4 px-8 text-sm font-light text-app-pure-white hover:bg-app-greyish-blue">
         <p>Trailer</p>
         <FaPlay className="text-base" />
       </a> */}

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 (
-    <div className='mb-4 flex items-end justify-between sm:mb-6'>
-      {isHomePage ? (
-        <div className='flex items-end'>
-          <h2 className='section-title py-px sm:py-0'>{title}</h2>
-          <p
-            className={
-              media_type === 'movie'
-                ? 'ml-2 rounded-md border-2 py-px px-2 text-[8px] font-medium uppercase tracking-wider text-app-pure-white sm:ml-4 sm:text-[10px]'
-                : 'ml-2 rounded-md border-2 border-app-pure-white bg-app-pure-white py-px px-2 text-[8px] font-medium uppercase tracking-wider text-app-dark-blue sm:ml-4 sm:text-[10px] '
-            }>
-            {media_type}
-          </p>
+                                    href,
+                                    isHomePage,
+                                    isTrending, // TODO: Do we need this here?
+                                    media_type,
+                                    clearHistoryFunction,
+                                    iscontinue_watching,
+                                    title,
+                                }) {
+    return (
+        <div className='mb-4 flex items-end justify-between sm:mb-6'>
+            {isHomePage ? (
+                <div className='flex items-end'>
+                    <h2 className='section-title py-px sm:py-0 text-app-dark-blue dark:text-app-pure-white'>{title}</h2>
+                    {media_type && <p
+                        className={
+                            media_type === 'movie'
+                                ? 'ml-2 rounded-md border-2 py-px px-2 text-[8px] font-light border-app-dark-blue dark:border-app-pure-white uppercase tracking-wider text-app-dark-blue dark:text-app-pure-white sm:ml-4 sm:text-[10px]'
+                                : 'ml-2 rounded-md border-2 border-app-dark-blue dark:border-app-pure-white dark:bg-app-dark-blue bg-light-white py-px px-2 text-[8px] font-light uppercase tracking-wider dark:text-app-pure-white text-app-dark-blue sm:ml-4 sm:text-[10px] '
+                        }>
+                        {media_type}
+                    </p>}
+                </div>
+            ) : (
+                <h2 className='section-title'>{title}</h2>
+            )}
+            {iscontinue_watching &&
+                <div onClick={clearHistoryFunction}
+                     className='cursor-pointer text-xs font-medium uppercase tracking-wide text-app-greyish-blue hover:underline'>
+                    Clear history
+                </div>
+            }
+            {href && <Link href={href} as={href} passHref>
+                <a className='cursor-pointer text-xs font-medium uppercase tracking-wide text-app-greyish-blue hover:underline'>
+                    See more
+                </a>
+            </Link>}
         </div>
-      ) : (
-        <h2 className='section-title'>{title}</h2>
-      )}
-      <Link href={href} as={href} passHref>
-        <a className='cursor-pointer text-xs font-medium uppercase tracking-wide text-app-greyish-blue hover:underline'>
-          See more
-        </a>
-      </Link>
-    </div>
-  )
+    )
 }

components/Layout.js

@@ -1,12 +1,13 @@
 import Footer from './Footer'
 import Navigation from './Navigation'
+import { ThemeToggler } from './ThemeToggler'
 
 export default function Layout({ children }) {
   return (
-    <div className='text-app-pure-white lg:flex'>
+    <div className='e bg-light-white text-app-dark-blue dark:bg-app-dark-blue dark:text-app-pure-white lg:flex lg:items-center'>
       <Navigation />
-      <main  className='mx-0 flex p-1 flex-col py-6 md:m-6 md:px-0 md:pt-0 lg:ml-[10rem] lg:min-w-[800px] lg:grow'>
-       
+      <ThemeToggler parentComponent={"main"}/>
+      <main className='mx-0 flex flex-col overflow-visible bg-light-white  p-4 py-6   dark:bg-app-dark-blue md:m-6 md:px-0 md:pt-12 lg:ml-[10rem] lg:min-w-[800px] lg:grow'>
         {children}
         <Footer />
       </main>

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 (
-    <nav className='sticky top-0 z-50 flex items-center justify-between bg-app-semi-dark-blue p-5 md:mx-6 md:mb-[33px] md:mt-6 md:rounded-[10px] lg:fixed lg:left-0 lg:mr-0 lg:h-5/6 lg:flex-col lg:py-9'>
-      <Tooltip id='my-tooltip' place='bottom-start' events='hover' />
-      <Link href='/' passHref>
-        <a>
-          <AppLogo />
-        </a>
-      </Link>
-      <div className='nav-res flex w-1/2 items-center justify-between 2xs:w-[70%] lg:h-[400px] lg:flex-col'>
+    <nav className='bg-app-shady-white sticky top-0 z-50 flex items-center  justify-between p-5 shadow-md shadow-black dark:bg-app-semi-dark-blue md:mx-6 md:mb-[33px] md:mt-6 md:rounded-[10px] lg:fixed lg:left-0 lg:my-12 lg:mr-0 lg:h-5/6 lg:flex-col lg:py-9'>
+      <div
+        onClick={() => setIsOpen(false)}
+        className={`  overlay backdrop ${isOpen ? 'active' : ''}`}></div>
+      <div
+        className={` sidebar backdrop hide-scrollbar active ${
+          isOpen ? 'translate-x-0' : 'translate-x-[-100%]'
+        } `}>
+        <nav>
+          <ul className='ml-2 mt-4 '>
+            <li>
+              <button
+                className='duration-400 mb-3 flex items-baseline rounded-full bg-white  px-3 py-1  text-black hover:bg-gray-600 dark:bg-[#5a6a90] dark:text-gray-200'
+                onClick={() => {
+                  setIsOpen(false)
+                }}>
+                <span className='mr-1 self-center'>
+                  <MdOutlineArrowBackIos />
+                </span>
+                <div className=''>Close Menu</div>
+              </button>
+            </li>
+            <li
+              onClick={() => setIsOpen(false)}
+              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4 dark:border-gray-900'>
+              <NavigationIcon href='/latest-top-10'>
+                <svg
+                  data-tooltip-id='my-tooltip'
+                  data-tooltip-content='Top10'
+                  width='24'
+                  height='24'
+                  fill='currentColor'
+                  className={
+                    router.pathname === '/latest-top-10'
+                      ? 'active-link'
+                      : 'icon-nav'
+                  }
+                  viewBox='0 0 16 16'>
+                  <path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16Zm0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 815 8 15Z' />
+                </svg>
+                <p className='ml-2'>Top-10</p>
+              </NavigationIcon>
+            </li>
+            <li
+              onClick={() => setIsOpen(false)}
+              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4 dark:border-gray-900 '>
+              <NavigationIcon href='/get-posts/category:Movies/'>
+                <svg
+                  data-tooltip-id='my-tooltip'
+                  data-tooltip-content='Browse'
+                  width='24'
+                  height='24'
+                  fill='currentColor'
+                  className={
+                    router.pathname === '/get-posts/[category]'
+                      ? 'active-link'
+                      : 'icon-nav'
+                  }
+                  viewBox='0 0 16 16'>
+                  <path d='M16 8a8.001 8.001 0 0 1-7.022 7.94l1.902-7.098a2.995 2.995 0 0 0 .05-1.492A2.977 2.977 0 0 0 10.237 6h5.511A8 8 0 0 1 16 8ZM0 8a8 8 0 0 0 7.927 8l1.426-5.321a2.978 2.978 0 0 1-.723.255 2.979 2.979 0 0 1-1.743-.147 2.986 2.986 0 0 1-1.043-.7L.633 4.876A7.975 7.975 0 0 0 0 8Zm5.004-.167L1.108 3.936A8.003 8.003 0 0 1 15.418 5H8.066a2.979 2.979 0 0 0-1.252.243 2.987 2.987 0 0 0-1.81 2.59ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' />
+                </svg>
+                <p className='ml-2'>Browse</p>
+              </NavigationIcon>
+            </li>
+            <li
+              onClick={() => setIsOpen(false)}
+              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900'>
+              <NavigationIcon href='/search'>
+                <svg
+                  data-tooltip-id='my-tooltip'
+                  data-tooltip-content='Search'
+                  width='24'
+                  height='24'
+                  fill='currentColor'
+                  className={
+                    router.pathname === '/search'
+                      ? 'active-link  !text-gray-600'
+                      : 'icon-nav'
+                  }
+                  viewBox='0 0 16 16'>
+                  <path d='M6.5 13a6.474 6.474 0 0 0 3.845-1.258h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.008 1.008 0 0 0-.115-.1A6.471 6.471 0 0 0 13 6.5 6.502 6.502 0 0 0 6.5 0a6.5 6.5 0 1 0 0 13Zm0-8.518c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z' />
+                </svg>
+                <p className='ml-2'>Search</p>
+              </NavigationIcon>
+            </li>
+            <li
+              onClick={() => setIsOpen(false)}
+              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900'>
+              <NavigationIcon href='/movie'>
+                <IconNavMovie />
+                <p className='ml-2'>Movie</p>
+              </NavigationIcon>
+            </li>
+            <li
+              onClick={() => setIsOpen(false)}
+              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900'>
+              <NavigationIcon
+                href='/tv'
+                data-tooltip-id='my-tooltip'
+                data-tooltip-content='TV'>
+                <IconNavTv />
+                <p className='ml-2'>TV</p>
+              </NavigationIcon>
+            </li>
+            <li
+              onClick={() => setIsOpen(false)}
+              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4 dark:border-gray-900'>
+              <NavigationIcon href={token ? '/upload' : '/login?page=upload'}>
+                <svg
+                  data-tooltip-id='my-tooltip'
+                  data-tooltip-content='Upload'
+                  width='24'
+                  height='24'
+                  fill='currentColor'
+                  className={
+                    router.pathname === '/upload' ? 'active-link' : 'icon-nav'
+                  }
+                  viewBox='0 0 16 16'>
+                  <path d='M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z' />
+                </svg>
+                <p className='ml-2'>Upload</p>
+              </NavigationIcon>
+            </li>
+            <li
+              onClick={() => setIsOpen(false)}
+              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900'>
+              {/* faq */}
+              <NavigationIcon href='/faq'>
+                <svg
+                  data-tooltip-id='my-tooltip'
+                  data-tooltip-content='FAQ'
+                  width='24'
+                  height='24'
+                  fill='currentColor'
+                  className={
+                    router.pathname === '/faq' ? 'active-link' : 'icon-nav'
+                  }
+                  viewBox='0 0 16 16'>
+                  <path d='M2 5C.892 5 0 5.892 0 7v7c0 1.108.892 2 2 2h9c1.108 0 2-.892 2-2v-3.8L16 7h-3c0-1.108-.892-2-2-2zm4.438 2C7.75 6.926 8.926 7.936 9 9.25c0 1.121-.308 1.544-1.281 2.281a1.68 1.68 0 00-.281.25c-.04.05-.032.033-.032.031.006.423-.39.782-.812.782a.79.79 0 01-.781-.782c0-.401.179-.754.375-1a3.14 3.14 0 01.562-.562 3.85 3.85 0 00.563-.531c.074-.09.097-.24.093-.344v-.031a.785.785 0 00-.843-.75c-.451.025-.813.362-.851.758a.697.697 0 01-.718.648.816.816 0 01-.781-.594 1.725 1.725 0 01.01-.533c.005-.014.006-.03.012-.043.202-1.024 1.09-1.768 2.203-1.83zm.156 6.406a.82.82 0 01.812.813c0 .442-.37.781-.812.781a.768.768 0 01-.781-.781c0-.442.339-.813.78-.813zM2 1C.892 1 0 1.892 0 3v.568A3.918 3.918 0 012 3h9c1.376 0 2.55.763 3.268 1.848L16 3h-3c0-1.108-.892-2-2-2z' />
+                </svg>
+                <p className='ml-2'>Help Center</p>
+              </NavigationIcon>
+            </li>
+            <li>
+              <ThemeToggler parentComponent={"sidebar"}/>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      <div className='flex gap-5'>
+        <div className='cursor-pointer lg:hidden' onClick={toggleSidebar}>
+          <svg
+            data-tooltip-id='my-tooltip'
+            xmlns='http://www.w3.org/2000/svg'
+            width='24'
+            height='24'
+            fill='hsl(223, 23%, 46%)'
+            className={
+              router.pathname === '/latest-top-10' ? 'active-link' : 'icon-nav'
+            }
+            viewBox='0 0 50 50'>
+            <path d='M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 Z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 Z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 Z'></path>
+          </svg>
+        </div>
+
+        <Tooltip id='my-tooltip' place='bottom-start' events='hover' />
+        <Link href='/' passHref>
+          <a>
+            <AppLogo />
+          </a>
+        </Link>
+      </div>
+
+      <div className='nav-res flex w-1/2 items-center justify-between max-lg:hidden 2xs:w-[70%] lg:my-5 lg:h-[300px] lg:flex-col'>
         {/* <NavigationIcon href='/'>
           <svg
             className={router.pathname === '/' ? 'active-link' : 'icon-nav'}
@@ -45,17 +220,14 @@ export default function Navigation() {
             height='24'
             fill='currentColor'
             className={
-              router.pathname == '/latest-top-10' ? 'active-link' : 'icon-nav'
+              router.pathname === '/latest-top-10' ? 'active-link' : 'icon-nav'
             }
             viewBox='0 0 16 16'>
             <path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16Zm0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15Z' />
           </svg>
         </NavigationIcon>
 
-        <div
-          onClick={() =>
-            (window.location.href = '/get-posts/category:Movies/')
-          }>
+        <NavigationIcon href='/get-posts/category:Movies/'>
           <svg
             data-tooltip-id='my-tooltip'
             data-tooltip-content='Browse'
@@ -63,14 +235,14 @@ export default function Navigation() {
             height='24'
             fill='currentColor'
             className={
-              router.pathname == '/get-posts/[category]'
+              router.pathname === '/get-posts/[category]'
                 ? 'active-link'
                 : 'icon-nav'
             }
             viewBox='0 0 16 16'>
             <path d='M16 8a8.001 8.001 0 0 1-7.022 7.94l1.902-7.098a2.995 2.995 0 0 0 .05-1.492A2.977 2.977 0 0 0 10.237 6h5.511A8 8 0 0 1 16 8ZM0 8a8 8 0 0 0 7.927 8l1.426-5.321a2.978 2.978 0 0 1-.723.255 2.979 2.979 0 0 1-1.743-.147 2.986 2.986 0 0 1-1.043-.7L.633 4.876A7.975 7.975 0 0 0 0 8Zm5.004-.167L1.108 3.936A8.003 8.003 0 0 1 15.418 5H8.066a2.979 2.979 0 0 0-1.252.243 2.987 2.987 0 0 0-1.81 2.59ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' />
           </svg>
-        </div>
+        </NavigationIcon>
 
         <NavigationIcon href='/search'>
           <svg
@@ -80,7 +252,7 @@ export default function Navigation() {
             height='24'
             fill='currentColor'
             className={
-              router.pathname == '/search' ? 'active-link' : 'icon-nav'
+              router.pathname === '/search' ? 'active-link' : 'icon-nav'
             }
             viewBox='0 0 16 16'>
             <path d='M6.5 13a6.474 6.474 0 0 0 3.845-1.258h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.008 1.008 0 0 0-.115-.1A6.471 6.471 0 0 0 13 6.5 6.502 6.502 0 0 0 6.5 0a6.5 6.5 0 1 0 0 13Zm0-8.518c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z' />
@@ -104,7 +276,7 @@ export default function Navigation() {
             height='24'
             fill='currentColor'
             className={
-              router.pathname == '/upload' ? 'active-link' : 'icon-nav'
+              router.pathname === '/upload' ? 'active-link' : 'icon-nav'
             }
             viewBox='0 0 16 16'>
             <path d='M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z' />
@@ -118,7 +290,7 @@ export default function Navigation() {
             width='24'
             height='24'
             fill='currentColor'
-            className={router.pathname == '/faq' ? 'active-link' : 'icon-nav'}
+            className={router.pathname === '/faq' ? 'active-link' : 'icon-nav'}
             viewBox='0 0 16 16'>
             <path d='M2 5C.892 5 0 5.892 0 7v7c0 1.108.892 2 2 2h9c1.108 0 2-.892 2-2v-3.8L16 7h-3c0-1.108-.892-2-2-2zm4.438 2C7.75 6.926 8.926 7.936 9 9.25c0 1.121-.308 1.544-1.281 2.281a1.68 1.68 0 00-.281.25c-.04.05-.032.033-.032.031.006.423-.39.782-.812.782a.79.79 0 01-.781-.782c0-.401.179-.754.375-1a3.14 3.14 0 01.562-.562 3.85 3.85 0 00.563-.531c.074-.09.097-.24.093-.344v-.031a.785.785 0 00-.843-.75c-.451.025-.813.362-.851.758a.697.697 0 01-.718.648.816.816 0 01-.781-.594 1.725 1.725 0 01.01-.533c.005-.014.006-.03.012-.043.202-1.024 1.09-1.768 2.203-1.83zm.156 6.406a.82.82 0 01.812.813c0 .442-.37.781-.812.781a.768.768 0 01-.781-.781c0-.442.339-.813.78-.813zM2 1C.892 1 0 1.892 0 3v.568A3.918 3.918 0 012 3h9c1.376 0 2.55.763 3.268 1.848L16 3h-3c0-1.108-.892-2-2-2z' />
           </svg>
@@ -164,7 +336,7 @@ export default function Navigation() {
             width='24'
             height='24'
             fill='currentColor'
-            className={router.pathname == '/login' ? 'active-link' : 'icon-nav'}
+            className={router.pathname === '/login' ? 'active-link' : 'icon-nav'}
             viewBox='0 0 16 16'>
             <path
               fillRule='evenodd'

components/NavigationIcon.js

@@ -3,7 +3,9 @@ import Link from 'next/link'
 export default function NavigationIcon({ children, href }) {
   return (
     <Link href={href} passHref>
-      <a className='cursor-pointer'>{children}</a>
+      <a className='flex cursor-pointer text-white dark:text-white'>
+        {children}
+      </a>
     </Link>
   )
 }

components/Pagination.js

@@ -18,15 +18,15 @@ export default function Pagination({
           onClick={goToPreviousPage}
           className={
             isFirst
-              ? 'disabled-link flex cursor-not-allowed items-center justify-center rounded-lg rounded-r-none border-2 py-2 pl-4 pr-6 font-medium'
-              : 'flex items-center justify-center rounded-lg rounded-r-none border-2 py-2 pl-4 pr-6 font-medium hover:bg-app-pure-white hover:text-app-dark-blue'
+              ? 'disabled-link flex cursor-not-allowed items-center justify-center rounded-lg rounded-r-none border-2 py-2 pl-4 pr-6 font-light'
+              : 'flex items-center justify-center rounded-lg rounded-r-none border-2 py-2 pl-4 pr-6 font-light hover:bg-light-white hover:text-app-dark-blue'
           }
         >
           <TiArrowLeftThick className='mr-2' />
           <span>Prev</span>
         </a>
       </Link>
-      <p className='border-t-2 border-b-2 bg-app-pure-white py-2 px-4 text-app-dark-blue'>
+      <p className='border-t-2 border-b-2 bg-light-white dark:bg-app-greyish-blue py-2 px-4 dark:text-app-pure-white text-app-dark-blue'>
         Page {currentPage} of {totalPages}
       </p>
       <Link href={nextHref} as={nextHref}>
@@ -34,8 +34,8 @@ export default function Pagination({
           onClick={goToNextPage}
           className={
             isLast
-              ? 'disabled-link flex cursor-not-allowed items-center justify-center rounded-lg rounded-l-none border-2 py-2 pr-4 pl-6 font-medium'
-              : 'flex items-center justify-center rounded-lg rounded-l-none border-2 py-2 pr-4 pl-6 font-medium hover:bg-app-pure-white hover:text-app-dark-blue'
+              ? 'disabled-link flex cursor-not-allowed items-center justify-center rounded-lg rounded-l-none border-2 py-2 pr-4 pl-6 font-light'
+              : 'flex items-center justify-center rounded-lg rounded-l-none border-2 py-2 pr-4 pl-6 font-light hover:bg-light-white hover:text-app-dark-blue'
           }
         >
           <span>Next</span>

components/SearchBar.js

@@ -1,36 +1,37 @@
-import { useRouter } from 'next/router'
-import { useState } from 'react'
+import {useRouter} from 'next/router'
+import {useState} from 'react'
 import IconSearch from './icons/IconSearch'
 import SearchButton from './SearchButton'
+import {useTheme} from "next-themes";
 
 export default function SearchBar({
-  placeholder = 'Search for movies or TV series',
-  searchPath,
-}) {
-  const router = useRouter()
-  const [query, setQuery] = useState('')
-
-  const handleSearch = e => {
-    e.preventDefault()
-    if (query.length === 0) {
-      return
-    } else {
-      router.push(`${searchPath}${query.trim()}?page=1`)
-      setQuery('')
+                                      placeholder = 'Search for movies or TV series',
+                                      searchPath,
+                                  }) {
+    const router = useRouter()
+    const [query, setQuery] = useState('')
+    const { theme, setTheme } = useTheme()
+    const handleSearch = e => {
+        e.preventDefault()
+        if (query.length === 0) {
+            return
+        } else {
+            router.push(`${searchPath}${query.trim()}?page=1`)
+            setQuery('')
+        }
     }
-  }
 
-  return (
-    <form onSubmit={handleSearch} className='flex grow pb-6 md:pb-10 lg:mt-9'>
-      <IconSearch className='h-6 w-6 md:h-8 md:w-8' />
-      <input
-        className='md:heading-md md:placeholder:heading-md mx-4 w-full rounded-none border-b border-app-dark-blue bg-app-dark-blue pb-[8px] text-base font-light caret-app-red placeholder:text-base placeholder:text-app-placeholder focus:border-b focus:border-app-greyish-blue focus:outline-none'
-        type='text'
-        placeholder={placeholder}
-        onChange={e => setQuery(e.target.value)}
-        value={query}
-      />
-      <SearchButton />
-    </form>
-  )
+    return (
+        <form onSubmit={handleSearch} className='flex grow pb-6 md:pb-10 lg:mt-9'>
+            <IconSearch className='h-6 w-6 md:h-8 md:w-8 dark:pt-1 pt-2'/>
+            <input
+                className='md:heading-md md:placeholder:heading-md mx-4 transition duration-300 ease-in-out dark:text-white text-app-dark-blue w-full rounded dark:rounded-none p-1 dark:pt-0 dark:bg-app-dark-blue bg-light-white pb-[8px] text-base font-light caret-app-red placeholder:text-base placeholder:text-app-dark-blue dark:shadow-[0px] shadow-2xl  border-b-[2px]  placeholder:dark:text-app-placeholder dark:focus:border-app-pure-white border-app-greyish-blue focus:outline-none'
+                type='text'
+                placeholder={placeholder}
+                onChange={e => setQuery(e.target.value)}
+                value={query}
+            />
+            <SearchButton/>
+        </form>
+    )
 }

components/SearchButton.js

@@ -2,7 +2,7 @@ export default function SearchButton() {
   return (
     <button
       type='submit'
-      className='text-capitalize flex items-center justify-center rounded-md bg-app-greyish-blue py-2 px-3 text-xs text-app-pure-white hover:bg-app-pure-white hover:text-app-dark-blue'>
+      className='text-capitalize flex items-center justify-center rounded-md bg-light-white dark:bg-app-greyish-blue py-2 px-3 text-xs text-app-dark-blue dark:text-app-pure-white hover:dark:bg-light-white hover:bg-app-dark-blue hover:text-app-pure-white  hover:dark:text-app-dark-blue'>
       Search
     </button>
   )

components/ThemeToggler.js

@@ -0,0 +1,71 @@
+import {useEffect, useState} from 'react'
+import {useTheme} from 'next-themes'
+
+export function ThemeToggler({parentComponent}) {
+    const [mounted, setMounted] = useState(false)
+    const {theme, setTheme} = useTheme()
+    useEffect(() => {
+        setMounted(true)
+        if (localStorage.getItem('theme')) setTheme(localStorage.getItem('theme'))
+        else setTheme('dark')
+    }, [])
+    useEffect(() => {
+        if (mounted) {
+            document.querySelector('.dark-mode-btn').addEventListener('click', () => {
+                document
+                    .querySelector('.dark-mode-btn')
+                    .classList.toggle('rotate-[360deg]')
+            })
+            localStorage.setItem('theme', theme)
+        }
+    }, [mounted])
+    if (!mounted) {
+        return null
+    } else {
+        if (parentComponent !== "sidebar")
+            return (
+                <div
+                    className={` right-16 top-20 z-50 rounded-3xl p-2 lg:block hidden lg:absolute static md:right-24 md:top-[33px] lg:right-5 lg:top-5  ${
+                        theme !== 'dark' ? 'bg-app-semi-dark-blue' : 'bg-app-pure-white'
+                    } h-9 w-9 text-white`}>
+                    <div className={'h-full w-full rounded-3xl'}>
+                        <div
+                            onClick={() => {
+                                setTheme(theme === 'light' ? 'dark' : 'light')
+                            }}
+                            className={`dark-mode-btn flex h-full w-full cursor-pointer items-center justify-center rounded-full transition  duration-500 ease-in-out `}>
+            <span
+                className={` ${
+                    theme === 'dark' ? 'text-black' : ''
+                } material-symbols-outlined`}>
+              {theme === 'dark' ? 'light_mode' : 'dark_mode'}
+            </span>
+                        </div>
+                    </div>
+                </div>
+            )
+        else
+            return (
+                <div
+                    className={`m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900  w-66 h-14 text-white`}>
+                    <div className={'h-full w-full rounded-3xl'}>
+                        <div
+                            onClick={() => {
+                                setTheme(theme === 'light' ? 'dark' : 'light')
+                            }}
+                            className={`dark-mode-btn flex h-full w-full cursor-pointer items-center justify-start gap-2 rounded-full transition  duration-500 ease-in-out `}>
+            <span
+                className={` ${
+                    theme === 'dark' ? 'text-white' : ''
+                } material-symbols-outlined`}>
+              {theme === 'dark' ? 'light_mode' : 'dark_mode'}
+            </span>
+                            <div>
+                                {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )
+    }
+}

components/icons/AppIcon.js

@@ -4,7 +4,7 @@ export default function AppIcon() {
   const router = useRouter()
   return (
     <svg
-      className={`h-[20px] w-[25px] lg:h-[25.6px] lg:w-[32px] ${router.pathname == '/' ? 'active-link' : 'icon-nav'}`}
+      className={`h-[24px] pt-[1px] w-[25px] lg:h-[25.6px] lg:w-[32px]  ${router.pathname == '/' ? 'active-link' : 'icon-nav'}`}
       data-tooltip-id="my-tooltip"
       data-tooltip-content="Home"
       width='1em'

components/icons/IconCategoryMovie.js

@@ -9,7 +9,6 @@ export default function IconCategoryMovie({ className = '' }) {
     >
       <path
         d='M10.173 0H1.827A1.827 1.827 0 0 0 0 1.827v8.346C0 11.183.818 12 1.827 12h8.346A1.827 1.827 0 0 0 12 10.173V1.827A1.827 1.827 0 0 0 10.173 0ZM2.4 5.4H1.2V4.2h1.2v1.2ZM1.2 6.6h1.2v1.2H1.2V6.6Zm9.6-1.2H9.6V4.2h1.2v1.2ZM9.6 6.6h1.2v1.2H9.6V6.6Zm1.2-4.956V2.4H9.6V1.2h.756a.444.444 0 0 1 .444.444ZM1.644 1.2H2.4v1.2H1.2v-.756a.444.444 0 0 1 .444-.444ZM1.2 10.356V9.6h1.2v1.2h-.756a.444.444 0 0 1-.444-.444Zm9.6 0a.444.444 0 0 1-.444.444H9.6V9.6h1.2v.756Z'
-        fill='#FFF'
         opacity='.75'
       />
     </svg>

components/icons/IconNavHome.js

@@ -5,15 +5,14 @@ export default function IconHome() {
 
   return (
     <svg
-     data-tooltip-id="my-tooltip"
-      data-tooltip-content="Dashboard"
+      data-tooltip-id='my-tooltip'
+      data-tooltip-content='Dashboard'
       className={router.pathname == '/dashboard' ? 'active-link' : 'icon-nav'}
       fill='currentColor'
       width='20'
       height='20'
       viewBox='0 0 20 20'
-      xmlns='http://www.w3.org/2000/svg'
-    >
+      xmlns='http://www.w3.org/2000/svg'>
       <path d='M8 0H1C.4 0 0 .4 0 1v7c0 .6.4 1 1 1h7c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1Zm0 11H1c-.6 0-1 .4-1 1v7c0 .6.4 1 1 1h7c.6 0 1-.4 1-1v-7c0-.6-.4-1-1-1ZM19 0h-7c-.6 0-1 .4-1 1v7c0 .6.4 1 1 1h7c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1Zm0 11h-7c-.6 0-1 .4-1 1v7c0 .6.4 1 1 1h7c.6 0 1-.4 1-1v-7c0-.6-.4-1-1-1Z' />
     </svg>
   )

package-lock.json

@@ -9,11 +9,13 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^1.5.0",
+        "bootstrap": "^5.3.2",
         "moment": "^2.29.4",
         "next": "12.1.0",
+        "next-themes": "^0.2.1",
         "nprogress": "^0.2.0",
         "react": "17.0.2",
-        "react-bootstrap": "^2.8.0",
+        "react-bootstrap": "^2.9.0",
         "react-data-table-component": "^7.5.4",
         "react-dom": "17.0.2",
         "react-icons": "^4.3.1",
@@ -23,8 +25,10 @@
         "react-toastify": "^9.1.3",
         "react-tooltip": "^5.21.3",
         "react-youtube": "^10.1.0",
+        "reactstrap": "^9.2.0",
         "recoil": "^0.6.1",
         "scss": "^0.2.4",
+        "sitemap": "^7.1.1",
         "swr": "^1.2.2",
         "uuid": "^8.3.2"
       },
@@ -32,10 +36,12 @@
         "autoprefixer": "^10.4.3",
         "eslint": "8.11.0",
         "eslint-config-next": "12.1.0",
+        "eslint-config-prettier": "^9.0.0",
         "postcss": "^8.4.11",
         "prettier": "^2.6.1",
         "prettier-plugin-tailwindcss": "^0.1.8",
         "tailwindcss": "^3.0.23",
+        "video.js": "^8.5.2",
         "webpack": "^5.88.2"
       }
     },
@@ -2757,8 +2763,7 @@
     "node_modules/@types/node": {
       "version": "20.6.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
-      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
-      "dev": true
+      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -2788,6 +2793,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/sax": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.6.tgz",
+      "integrity": "sha512-A1mpYCYu1aHFayy8XKN57ebXeAbh9oQIZ1wXcno6b1ESUAfMBDMx7mf/QGlYwcMRaFryh9YBuH03i/3FlPGDkQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -2800,9 +2813,9 @@
       "peer": true
     },
     "node_modules/@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.1.tgz",
+      "integrity": "sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg=="
     },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.62.0",
@@ -2905,6 +2918,98 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@videojs/http-streaming": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.5.3.tgz",
+      "integrity": "sha512-dty8lsZk9QPc0i4It79tjWsmPiaC3FpgARFM0vJGko4k3yKNZIYkAk8kjiDRfkAQH/HZ3rYi5dDTriFNzwSsIg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "4.0.0",
+        "aes-decrypter": "4.0.1",
+        "global": "^4.4.0",
+        "m3u8-parser": "^7.1.0",
+        "mpd-parser": "^1.1.1",
+        "mux.js": "7.0.0",
+        "video.js": "^7 || ^8"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "video.js": "^7 || ^8"
+      }
+    },
+    "node_modules/@videojs/http-streaming/node_modules/m3u8-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
+      "integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
+    "node_modules/@videojs/http-streaming/node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/http-streaming/node_modules/mux.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.0.tgz",
+      "integrity": "sha512-DeZmr+3NDrO02k4SREtl4VB5GyGPCz2fzMjDxBIlamkxffSTLge97rtNMoonnmFHTp96QggDucUtKv3fmyObrA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/vhs-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
+      "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -3051,6 +3156,15 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -3093,6 +3207,33 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/aes-decrypter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
+      "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
+    "node_modules/aes-decrypter/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3164,8 +3305,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -3485,6 +3625,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3917,6 +4075,12 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
+      "dev": true
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.513",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.513.tgz",
@@ -4168,6 +4332,18 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
+      "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -4859,6 +5035,16 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dev": true,
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "node_modules/globals": {
       "version": "13.21.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
@@ -5053,6 +5239,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -5222,6 +5414,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+      "dev": true
+    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -5551,6 +5749,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A==",
+      "dev": true
+    },
     "node_modules/keyv": {
       "version": "4.5.3",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
@@ -5651,6 +5855,32 @@
         "node": ">=10"
       }
     },
+    "node_modules/m3u8-parser": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-6.2.0.tgz",
+      "integrity": "sha512-qlC00JTxYOxawcqg+RB8jbyNwL3foY/nCY61kyWP+RCuJE9APLeqB/nSlTjb4Mg0yRmyERgjswpdQxMvkeoDrg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
+    "node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -5734,6 +5964,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dev": true,
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5762,11 +6001,58 @@
         "node": "*"
       }
     },
+    "node_modules/mpd-parser": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.2.2.tgz",
+      "integrity": "sha512-QCfB1koOoZw6E5La1cx+W/Yd0EZlRhHMqMr4TAJez0eRTuPDzPM5FWoiOqjyo37W+ISPLzmfJACSbJFEBjbL4Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "mpd-to-m3u8-json": "bin/parse.js"
+      }
+    },
+    "node_modules/mpd-parser/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/mux.js": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.3.0.tgz",
+      "integrity": "sha512-/QTkbSAP2+w1nxV+qTcumSDN5PA98P0tjrADijIzQHe85oBK3Akhy9AHlH0ne/GombLMz1rLyvVsmrgRxoPDrQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -5856,6 +6142,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
+      "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==",
+      "peerDependencies": {
+        "next": "*",
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.5",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
@@ -6153,6 +6449,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      },
+      "bin": {
+        "pkcs7": "bin/cli.js"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.29",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
@@ -6327,6 +6635,15 @@
         "prettier": ">=2.2.0"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6405,14 +6722,14 @@
       }
     },
     "node_modules/react-bootstrap": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.8.0.tgz",
-      "integrity": "sha512-e/aNtxl0Z2ozrIaR82jr6Zz7ss9GSoaXpQaxmvtDUsTZIq/XalkduR/ZXP6vbQHz2T4syvjA+4FbtwELxxmpww==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.0.tgz",
+      "integrity": "sha512-dGh6fGjqR9MBzPOp2KbXJznt1Zy6SWepXYUdxMT18Zu/wJ73HCU8JNZe9dfzjmVssZYsJH9N3HHE4wAtQvNz7g==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.5",
         "@restart/hooks": "^0.4.9",
-        "@restart/ui": "^1.6.3",
-        "@types/react-transition-group": "^4.4.5",
+        "@restart/ui": "^1.6.6",
+        "@types/react-transition-group": "^4.4.6",
         "classnames": "^2.3.2",
         "dom-helpers": "^5.2.1",
         "invariant": "^2.2.4",
@@ -6458,6 +6775,11 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
@@ -6494,6 +6816,20 @@
         "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
       }
     },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-rating": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/react-rating/-/react-rating-2.0.5.tgz",
@@ -6593,6 +6929,23 @@
         "react": ">=0.14.1"
       }
     },
+    "node_modules/reactstrap": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.2.0.tgz",
+      "integrity": "sha512-WWLTEG00qYav0E55PorWHReYTkz5IqkVmQNy0h6U81yqjSp9fOLFGV5pYSVeAUz+yRhU/RTE0oAWy22zr6sOIw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@popperjs/core": "^2.6.0",
+        "classnames": "^2.2.3",
+        "prop-types": "^15.5.8",
+        "react-popper": "^2.2.4",
+        "react-transition-group": "^4.4.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6824,6 +7177,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "dev": true,
+      "dependencies": {
+        "individual": "^2.0.0"
+      }
+    },
     "node_modules/safe-array-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
@@ -6862,6 +7224,15 @@
         }
       ]
     },
+    "node_modules/safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "dev": true,
+      "dependencies": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@@ -6876,6 +7247,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+    },
     "node_modules/scheduler": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@@ -6984,6 +7360,29 @@
       "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
       "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA=="
     },
+    "node_modules/sitemap": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
+      "integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
+      "dependencies": {
+        "@types/node": "^17.0.5",
+        "@types/sax": "^1.2.1",
+        "arg": "^5.0.0",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "sitemap": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=5.6.0"
+      }
+    },
+    "node_modules/sitemap/node_modules/@types/node": {
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -7677,6 +8076,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==",
+      "dev": true
+    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
@@ -7721,6 +8126,59 @@
       "integrity": "sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==",
       "dev": true
     },
+    "node_modules/video.js": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.5.2.tgz",
+      "integrity": "sha512-6/uNXQV3xSaKLpaPf/bVvr7omd+82sKUp0RMBgIt4PxHIe28GtX+O+GcNfI2fuwBvcDRDqk5Ei5AG9bJJOpulA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "3.5.3",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "^4.0.1",
+        "global": "4.4.0",
+        "keycode": "2.2.0",
+        "m3u8-parser": "^6.0.0",
+        "mpd-parser": "^1.0.1",
+        "mux.js": "^6.2.0",
+        "safe-json-parse": "4.0.0",
+        "videojs-contrib-quality-levels": "4.0.0",
+        "videojs-font": "4.1.0",
+        "videojs-vtt.js": "0.15.5"
+      }
+    },
+    "node_modules/videojs-contrib-quality-levels": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.0.0.tgz",
+      "integrity": "sha512-u5rmd8BjLwANp7XwuQ0Q/me34bMe6zg9PQdHfTS7aXgiVRbNTb4djcmfG7aeSrkpZjg+XCLezFNenlJaCjBHKw==",
+      "dev": true,
+      "dependencies": {
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "video.js": "^8"
+      }
+    },
+    "node_modules/videojs-font": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
+      "integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w==",
+      "dev": true
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "dev": true,
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

package.json

@@ -11,11 +11,13 @@
   },
   "dependencies": {
     "axios": "^1.5.0",
+    "bootstrap": "^5.3.2",
     "moment": "^2.29.4",
     "next": "12.1.0",
+    "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
     "react": "17.0.2",
-    "react-bootstrap": "^2.8.0",
+    "react-bootstrap": "^2.9.0",
     "react-data-table-component": "^7.5.4",
     "react-dom": "17.0.2",
     "react-icons": "^4.3.1",
@@ -25,8 +27,10 @@
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.21.3",
     "react-youtube": "^10.1.0",
+    "reactstrap": "^9.2.0",
     "recoil": "^0.6.1",
     "scss": "^0.2.4",
+    "sitemap": "^7.1.1",
     "swr": "^1.2.2",
     "uuid": "^8.3.2"
   },
@@ -34,10 +38,12 @@
     "autoprefixer": "^10.4.3",
     "eslint": "8.11.0",
     "eslint-config-next": "12.1.0",
+    "eslint-config-prettier": "^9.0.0",
     "postcss": "^8.4.11",
     "prettier": "^2.6.1",
     "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "^3.0.23",
+    "video.js": "^8.5.2",
     "webpack": "^5.88.2"
   }
 }

pages/404.js

@@ -9,7 +9,7 @@ export default function Custom404() {
       </Head>
       <h1 className='my-20 text-xl md:text-4xl'>404 - Page Not Found</h1>
       <Link href='/' passHref>
-        <button className='rounded-md bg-app-greyish-blue p-2 px-4 hover:bg-app-pure-white hover:text-app-dark-blue'>
+        <button className='rounded-md bg-app-greyish-blue p-2 px-4 hover:bg-light-white hover:text-app-dark-blue'>
           Go home
         </button>
       </Link>

pages/_app.js

@@ -1,23 +1,28 @@
 import Router from 'next/router'
 import NProgress from 'nprogress'
-import { RecoilRoot } from 'recoil'
+import {RecoilRoot} from 'recoil'
 import Layout from '../components/Layout'
 import '../styles/globals.css'
 import '../styles/nprogress.css'
+import {ToastContainer} from 'react-toastify';
+import {ThemeProvider} from "next-themes";
 
-NProgress.configure({ showSpinner: false })
+NProgress.configure({showSpinner: false})
 Router.events.on('routeChangeStart', () => NProgress.start())
 Router.events.on('routeChangeComplete', () => NProgress.done())
 Router.events.on('routeChangeError', () => NProgress.done())
 
-function MyApp({ Component, pageProps }) {
-  return (
-    <RecoilRoot>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </RecoilRoot>
-  )
+function MyApp({Component, pageProps}) {
+    return (
+        <ThemeProvider attribute={"class"}>
+            <RecoilRoot>
+                <Layout>
+                    <ToastContainer/>
+                    <Component {...pageProps} />
+                </Layout>
+            </RecoilRoot>
+        </ThemeProvider>
+    )
 }
 
 export default MyApp

pages/_document.js

@@ -4,19 +4,28 @@ export default function Document() {
   return (
     <Html>
       <Head>
-        <link rel="shortcut icon" href="/logo.svg" type="image/x-icon" />
+        <link rel='shortcut icon' href='/logo.svg' type='image/x-icon' />
         <link rel='preconnect' href='https://fonts.googleapis.com' />
         <link
-          rel="stylesheet"
-          href="https://unicons.iconscout.com/release/v4.0.0/css/unicons.css"
+          href='https://vjs.zencdn.net/8.5.2/video-js.css'
+          rel='stylesheet'
         />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
+        <link
+          rel='stylesheet'
+          href='https://unicons.iconscout.com/release/v4.0.0/css/unicons.css'
+        />
+        <link
+          rel='stylesheet'
+          href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'
+        />
+        <link
+          rel='stylesheet'
+          href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'></link>
         <link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin />
         <link
           href='https://fonts.googleapis.com/css2?family=Outfit:wght@300;500&display=swap'
           rel='stylesheet'
         />
-        
       </Head>
       <body>
         <Main />

pages/api/movie/[id].js

@@ -7,10 +7,6 @@ export default async function handler(req, res) {
     const response = await fetch(getMovieDetail(id))
     const response2 = await fetch(getMovieCasts(id))
 
-   
-   
-   
-   
     const data = await response.json()
     const data2 = await response2.json()
     const response3 = await fetch(getLinkByIMDB(data.imdb_id));

pages/api/tv/[id].js

@@ -8,6 +8,7 @@ export default async function handler(req, res) {
     const response2 = await fetch(getTvCasts(id))
     const data = await response.json()
     const data2 = await response2.json()
+
     res.status(200).json({
       detail: data,
       credits: data2,

pages/dashboard.js

@@ -3,7 +3,7 @@ import Card from '../Common/Card';
 import { Loader } from '../Common/Loader'
 import ToastMsg from '../Common/ToastMsg'
 import { getTorrentList } from '../service/service'
-
+import Head from 'next/head'
 const Dashboard = () => {
 
 
@@ -38,23 +38,25 @@ const Dashboard = () => {
   }
   return (
     <>
+    
+     <Head>
+        <title>Dashboard | Yaps</title>
+      </Head>
       <div className="flex justify-center">
+
         <div className='text-center mt-4 text-[32px] font-bold w-[95%]'>
           {loader ? <Loader /> : null}
           <h1>Dashboard</h1>
           <div className='text-[16px] font-md text-right mt-3'>
             <h1> {"Welcome " + userData?.first_name + " " + userData?.last_name}</h1>
           </div>
-
-
-
         </div>
 
       </div>
       <br />
       <br />
 
-      <div className='w-auto mb-[3rem] mx-4 md:mx-[9rem] bg-card relative text-center flex rounded-xl overflow-hidden'>
+      <div className='w-auto mb-[3rem] mx-4 md:mx-[9rem] dark:bg-card bg-white relative text-center flex rounded-xl overflow-hidden'>
 
         <div className={`flex-1 px-4 flex-wrap py-8 justify-center`}>
           {list.length > 0 ? list?.map((item, index) => {

pages/faq.jsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react'
+import Head from 'next/head'
 const faqData = [
   {
     question: 'What is YAPS?',
     answer:
-      'YAPS (Yet another piracy site) is a torrent site that allows users to download and share copyrighted content such as movies, music, software, and more.',
+      'YAPS (Yet Another Piracy Site) is a torrent site that allows users to download and share copyrighted content such as movies, music, software, and more.',
   },
   {
     question: 'How does YAPS work?',
     answer:
-      'Users can search for their desired content on YAPS and download it using a BitTorrent client. YAPS operates on a peer-to-peer network, meaning that users download files from other users who have already downloaded them',
+      'Users can search for their desired content on YAPS and download it using a BitTorrent client. YAPS operates on a peer-to-peer network, meaning that users download files from other users who have already downloaded them.',
   },
   {
     question: 'How can I protect my privacy while using YAPS?',
@@ -21,24 +22,29 @@ const faqData = [
       "YAPS is a user-driven platform, and the availability of content depends on what other users have uploaded. If you can't find what you're looking for, it may not be available on YAPS.",
   },
   {
-    question: 'Is it safe to download from Yaps?',
+    question: 'Is it safe to download from YAPS?',
     answer:
-      "We allow only verified torrents to be uploaded on our site.Yet there are no absolutes when it comes to protection .User should always scan/test whatever they download and don't take anything for granted. Mistakes often happen as the uploaders are also humans, or someone could just simply want to trick us. From our side, as a site, we try our best to keep you protected but that does NOT mean you should let your guards down.",
+      "We allow only verified torrents to be uploaded on our site. However, there are no absolutes when it comes to protection. Users should always scan/test whatever they download and don't take anything for granted. Mistakes often happen as the uploaders are also humans, or someone could just simply want to trick us. From our side, as a site, we try our best to keep you protected but that does NOT mean you should let your guards down.",
   },
   {
-    question: 'Is there any rule to maintain  the ratio ?',
+    question: 'Are there any rules about ratios?',
     answer:
-      "No ,currently we don't have any rule to maintain the ratio .But the users are still advised to maintain their ratio instead of Hit and Run .",
+      "No. Currently, we don't have any rule to maintain the ratio, but the users are still advised to maintain their ratio instead of doing a Hit and Run.",
   },
   {
     question: 'What is Hit and Run ?',
     answer:
       'Hit and Run is a term used to describe a user who downloads a torrent and then does not seed it back for other users to download. This is considered bad etiquette and is frowned upon by the community.',
   },
+  {
+    question: 'How long should I seed for?',
+    answer:
+      'Generally speaking, you should try to seed for as long as possible. However, if you are not able to, 1:1 or 2:1 are great ratios. For example, if you were to download a 1GB file, you should try to upload/seed 1 or 2 GBs.',
+  },
   {
     question: 'What is the difference between a seed and a leech?',
     answer:
-      ' A "Seed" is a user who has a complete copy of the file being shared and is actively sharing it with others while "Leech" is a user who is downloading the file but is not sharing it with others.}',
+      'A "Seed" is a user who has a complete copy of the file being shared and is actively sharing it with others, while a "Leech" is a user who is downloading the file but is not sharing it with others.',
   },
 ]
 
@@ -52,25 +58,37 @@ const FAQ = () => {
       setOpenIndices([...openIndices, index])
     }
   }
+
   return (
     <div className='max-lg:ml-[10%]  min-[1700px]:ml-[-9%] min-[1900px]:ml-[-15%] min-[2000px]:ml-[-20%] min-[2300px]:ml-[-27%]'>
-      <h1 className='mb-10 text-2xl font-bold text-center text-white '>FAQ</h1>
+      <Head>
+        <title>Faq | Yaps</title>
+      </Head>
+      <h1 className='mb-10 text-center text-2xl font-bold text-app-dark-blue dark:text-white '>
+        HELP CENTER
+      </h1>
       <div className=' w-[80vw]'>
-        <div className='grid grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-2 '>
+        <div className='grid grid-cols-2 gap-x-4 gap-y-6 md:grid-cols-2 '>
           {faqData.map((item, index) => {
             return (
               <div
-                key={index}
-                className={`cursor-pointer rounded-lg bg-[#171E31] px-4 py-5 shadow-sm hover_effect-1 shadow-slate-800 `}
-                onClick={() => toggleAnswer(index)}>
-                <div className='flex items-center justify-between '>
-                  <h3 className='text-xl font-medium text-white '>
-                    {item.question}
-                  </h3>
+                key={index * 2}
+                className={`hover_effect-1 ${
+                  openIndices.includes(index) ? 'max-h-64' : 'max-h-16'
+                } cursor-pointer overflow-hidden rounded-lg bg-[#171E31] px-4 py-5 shadow-sm shadow-slate-800 transition duration-[0.5s] ease-in-out `}
+                onClick={() => {
+                  toggleAnswer(index)
+                }}>
+                <h3 className='text-xl font-light text-white '>
+                  {item.question}
+                </h3>
+                <div
+                  key={index}
+                  className={`${
+                    openIndices.includes(index) ? 'opacity-1  ' : 'opacity-0'
+                  } mt-6 text-gray-500 transition duration-300 ease-in-out`}>
+                  {item.answer}
                 </div>
-                {openIndices.includes(index) && (
-                  <div className='mt-6 text-gray-500'>{item.answer}</div>
-                )}
               </div>
             )
           })}

pages/get-posts/[category].js

@@ -1,185 +1,261 @@
-import { SearchSVG } from '../../SVG/search'
-import React, { useEffect, useState } from 'react'
-
-import { getSearchResult, moviesListApi } from '../../service/service';
-import ToastMsg from '../../Common/ToastMsg';
-import { Loader } from '../../Common/Loader';
-import { useRouter } from 'next/router';
-import CardExpanded from '../../Common/CardExpanded';
-import { CompactList, ExpandedList, FilterIcon } from '../../SVG/listing';
-import CardCompact from '../../Common/CardCompact';
-
-
-
+import {SearchSVG} from '../../SVG/search'
+import React, {useEffect, useState} from 'react'
 
+import {getSearchResult, moviesListApi} from '../../service/service'
+import ToastMsg from '../../Common/ToastMsg'
+import {Loader} from '../../Common/Loader'
+import {useRouter} from 'next/router'
+import CardExpanded from '../../Common/CardExpanded'
+import {CompactList, ExpandedList} from '../../SVG/listing'
+import CardCompact from '../../Common/CardCompact'
+import Head from 'next/head'
+import {useTheme} from 'next-themes'
 
 const Latest = () => {
-  const router = useRouter()
-  const { category, time } = router.query;
-  const categoryId = category ? category.split(':')[1] : "Movies";
+    const router = useRouter()
+    const {category} = router.query
+    const categoryId = category ? category.split(':')[1] : null
 
-  let data = [{ name: "Movie", cat: "Movies", time: "10D", color: "#ee7633" },
-  { name: "TV-Show", cat: "TV", time: "10D", color: "#7affb8" },
-  { name: "Games", cat: "Games", time: "10D", color: "#ADFF2F" },
-  { name: "Music", cat: "Music", time: "10D", color: "#418eed" },
-  { name: "Anime", cat: "Anime", time: "10D", color: "#00FFFF" },
-  { name: "Books", cat: "Books", time: "10D", color: "#CDCD00" },
-  { name: "XXX", cat: "XXX", time: "10D", color: "#FF00FF" },
-  { name: "Other", cat: "Other", time: "10D", color: "#ebad32" }]
+    // { name: "TV-Show", cat: "TV", time: "10D", color: "#7a1fb8" },
+    // { name: "Games", cat: "Games", time: "10D", color: "#AD1F2F" },
+    // { name: "Music", cat: "Music", time: "10D", color: "#411eed" },
+    // { name: "Anime", cat: "Anime", time: "10D", color: "#001F1F" },
+    // { name: "Books", cat: "Books", time: "10D", color: "#fD1Df1" },
+    // { name: "XXX", cat: "XXX", time: "10D", color: "#Fc3799" },  
+    // { name: "Other", cat: "Other", time: "10D", color: "#ff0000" }]
+    let data = [
+        {name: 'Movie', cat: 'Movies', time: '10D', color: '#ee7633'},
+        {
+            name: 'TV-Show',
+            cat: 'TV',
+            time: '10D',
+            light_color: '#7affb8',
+            dark_color: '#7a1fb8',
+        },
+        {
+            name: 'Games',
+            cat: 'Games',
+            time: '10D',
+            light_color: '#ADFF2F',
+            dark_color: '#AD1F2F',
+        },
+        {
+            name: 'Music',
+            cat: 'Music',
+            time: '10D',
+            light_color: '#418eed',
+            dark_color: '#411eed',
+        },
+        {
+            name: 'Anime',
+            cat: 'Anime',
+            time: '10D',
+            light_color: '#00FFFF',
+            dark_color: '#001F1F',
+        },
+        {
+            name: 'Books',
+            cat: 'Books',
+            time: '10D',
+            light_color: '#CDCD00',
+            dark_color: '#fD1Df1',
+        },
+        {
+            name: 'XXX',
+            cat: 'XXX',
+            time: '10D',
+            light_color: '#FF00FF',
+            dark_color: '#Fc3799',
+        },
+        {
+            name: 'Other',
+            cat: 'Other',
+            time: '10D',
+            light_color: '#ebad32',
+            dark_color: '#ff0000',
+        },
+    ]
+    const [movieList, setMovieList] = useState([])
+    const [ListType, setListType] = useState('expanded')
+    const [Filter, setFilter] = useState(false)
+    const [page, setPage] = useState(1)
+    const [loader, setLoader] = useState(false)
+    const [cat, setCat] = useState(categoryId)
+    const [search, setSearch] = useState(false)
+    const {theme, setTheme} = useTheme()
+    setTheme(theme)
+    useEffect(() => {
+        fetchMovieList(cat)
+    }, [page])
+    useEffect(() => {
+        fetchMovieListRefresh(category?.split(':')[1])
+        setCat(category?.split(':')[1])
+    }, [category])
 
-  const [movieList, setMovieList] = useState([])
-  const [ListType, setListType] = useState('expanded');
-  const [Filter, setFilter] = useState(false);
-  const [page, setPage] = useState(1)
-  const [loader, setLoader] = useState(false)
-  const [cat, setCat] = useState(categoryId)
-  const [search, setSearch] = useState(false)
-
-  useEffect(() => {
-    fetchMovieList(cat);
-  }, [page])
-  useEffect(() => {
-    fetchMovieListRefresh(cat);
-    setCat(categoryId)
-  }, [categoryId])
-
-  const fetchMovieList = (cat) => {
-   
-    let category = cat ? cat : "Movies"
-    let latest = ""
-    setLoader(true)
-    moviesListApi(page, category, latest).then((res) => {
-      console.log("page", res?.data?.results)
-      setLoader(false)
-      setMovieList([...movieList, ...res.data.results])
-     
-    }).catch((err) => {
-      console.log("error", err)
-      ToastMsg("Some thing went wrong ", "error")
-      setLoader(false)
-    })
-
-  }
-
-  const fetchMovieListRefresh = (categoryId) => {
-
-    let latest = ""
-    setLoader(true)
-    moviesListApi(page, categoryId, latest).then((res) => {
-      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 searchResult = (e) => {
-    e.preventDefault()
-    setLoader(true)
-    getSearchResult(search).then((res) => {
-      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 handleScroll = () => {
-    
-    if (
-      (window.innerHeight + window.scrollY) > (document.body.scrollHeight - 150) 
-    ) {
-     setTimeout(()=>{
-      setPage(page+1)
-     },100)
-     
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [page]);
-
-
-  return (
-    <div className='text-center font-montserrat'>
-      {loader ? <Loader /> : null}
-
-      <div className='w-full justify-end'>
-
-        <form onSubmit={(e) => {
-          searchResult(e)
-
-        }} className='w-10/12 md:w-1/2 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-          <input className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={(e) => { setSearch(e.target.value) }} placeholder='Start typing what you want ?' />
-          <div className='cursor-pointer' onClick={(e) => {
-            searchResult(e)
-            router.push(`/get-posts/keywords:${search}/`)
-          }}>
-            <SearchSVG />
-          </div>
-        </form>
-        <div className='mx-8  flex flex-wrap text-center justify-center'>
-          {
-            data.map((item, index) => {
-              return (
-                <div onClick={() => {
-                  setCat(item?.cat)
-                  setPage(1)
-                  router.push(`/get-posts/category:${item?.cat}`)
-                }} key={index} className="flex bg-primary/15 cursor-pointer  font-medium text-[14px] rounded lowercase my-1 mx-2 px-2 py-0.5 hover:bg-[#008000] hover:text-white"
-                  style={{ color: cat === item?.cat ? "#fff" : item?.color, background: cat === item?.cat ? "#008000" : "" }}>
-                  <label className='cursor-pointer'>{item?.name} </label></div>
-              )
+    const fetchMovieList = cat => {
+        let category = cat ? cat : 'Movies'
+        let latest = ''
+        setLoader(true)
+        moviesListApi(page, category, latest)
+            .then(res => {
+                console.log('page', res?.data?.results)
+                setLoader(false)
+                setMovieList([...movieList, ...res.data.results])
             })
-          }
+            .catch(err => {
+                console.log('error', err)
+                ToastMsg('Some thing went wrong ', 'error')
+                setLoader(false)
+            })
+    }
 
+    const fetchMovieListRefresh = categoryId => {
+        let latest = ''
+        setLoader(true)
+        moviesListApi(page, categoryId, latest)
+            .then(res => {
+                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 searchResult = e => {
+        e.preventDefault()
+        if (!movieList) {
+            setLoader(true)
+            getSearchResult(search)
+                .then(res => {
+                    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 handleScroll = () => {
+        if (
+            window.innerHeight + window.scrollY >
+            document.body.scrollHeight - 150
+        ) {
+            setTimeout(() => {
+                setPage(page + 1)
+            }, 100)
+        }
+    }
+
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll)
+        return () => {
+            window.removeEventListener('scroll', handleScroll)
+        }
+    }, [page])
+
+    return (
+        <div className='font-montserrat text-center'>
+            <Head>
+                <title>Browse | Yaps</title>
+            </Head>
+            {!movieList.length > 0 ? <Loader/> : null}
+            <div className='w-full justify-end'>
+                <form
+                    onSubmit={e => {
+                        searchResult(e)
+                    }}
+                    className='mx-auto my-3 flex w-10/12 items-center border-b-[1px] 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'
+                        onChange={e => {
+                            setSearch(e.target.value)
+                        }}
+                        placeholder='Start typing what you want ?'
+                    />
+                    <div
+                        className='cursor-pointer'
+                        onClick={e => {
+                            searchResult(e)
+                            router.push(`/get-posts/keywords:${search}/`)
+                        }}>
+                        <SearchSVG/>
+                    </div>
+                </form>
+                <div className='mx-8  flex flex-wrap justify-center text-center'>
+                    {data.map((item, index) => {
+                        return (
+                            <div
+                                onClick={() => {
+                                    setCat(item?.cat)
+                                    setPage(1)
+                                    router.push(`/get-posts/category:${item?.cat}`)
+                                }}
+                                key={index}
+                                className={`category-text bg-primary/15 mx-2 my-1 flex cursor-pointer rounded px-2 py-0.5 text-[15px] font-light lowercase hover:bg-[#008000] !hover:text-[${item.hover_color}] `}
+                                style={{
+                                    color:
+                                        cat === item?.cat
+                                            ? '#fff'
+                                            : theme === 'light'
+                                                ? item?.dark_color
+                                                : item?.light_color,
+                                    background: cat === item?.cat ? '#008000' : '',
+                                }}>
+                                <label className='cursor-pointer'>{item?.name} </label>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+            <div className='w-full'>
+                <div className='absolute right-0 flex justify-end md:right-[4%]'>
+                    <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>
+            </div>
+            <br/> <br/>
+            <div className='relative mb-[3rem]   flex w-auto overflow-hidden  rounded-xl text-center'>
+                <div className={`flex w-full flex-wrap justify-evenly p-2  py-8  `}>
+                    {movieList?.map((item, index) => {
+                        if (ListType === 'compact') {
+                            return (
+                                <CardCompact key={index} item={item} categoryId={categoryId}/>
+                            )
+                        } else {
+                            return (
+                                <CardExpanded key={index} item={item} categoryId={categoryId}/>
+                            )
+                        }
+                    })}
+                    {movieList.length === 0 ? <h1>No Data Found </h1> : null}
+                </div>
+            </div>
         </div>
-
-      </div>
-      <div className='w-full'>
-        <div className='flex justify-end absolute md:right-[4%] 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>
-      </div>
-      <br />  <br />
-
-      <div className='w-auto mb-[3rem]   relative text-center flex rounded-xl overflow-hidden'>
-
-        <div className={`flex w-full p-2 flex-wrap py-8  justify-evenly  `}>
-          {movieList?.map((item, index) => {
-            if (ListType === 'compact') {
-              return (
-                <CardCompact key={index} item={item} categoryId={categoryId} />
-              )
-            } else {
-              return (
-                <CardExpanded key={index} item={item} categoryId={categoryId} />
-              )
-            }
-          })}
-          {movieList.length === 0 ? <h1>No Data Found </h1> : null}
-        </div>
-      </div>
-    </div>
-  )
+    )
 }
 
 export default Latest

pages/index.js

@@ -2,106 +2,109 @@ import Head from 'next/head'
 import CardTrending from '../components/CardTrending'
 import Collection from '../components/Collection'
 import SearchBar from '../components/SearchBar'
-import { pathToSearchAll } from '../utils'
-
+import {pathToSearchAll} from '../utils'
+import CollectionContinueWatching from "../components/CollectionContinueWatching";
+import {ThemeToggler} from "../components/ThemeToggler";
+import {useTheme} from "next-themes";
 export default function Home() {
-  const limitNormal = 6
-  const limitTrending = 10
+    const limitNormal = 6
+    const limitTrending = 10
+    return (
+        <>
+            <Head>
+                <title>Home | Yaps</title>
+            </Head>
+            <SearchBar searchPath={pathToSearchAll}/>
+            {/*Continue watching*/}
+            <CollectionContinueWatching
+            />
+            {/* Collection of different groups of movies */}
+            <Collection
+                isHomePage
+                isTrending
+                Component={CardTrending}
+                endpoint='/api/movie/trending/1'
+                href='/movie/trending/1'
+                limit={limitTrending}
+                title='Trending'
+            />
+            <Collection
+                isHomePage
+                endpoint='/api/movie/popular/1'
+                href='/movie/popular/1'
+                limit={limitNormal}
+                title='Popular'
+            />
+            <Collection
+                isHomePage
+                endpoint='/api/movie/now/1'
+                href='/movie/now/1'
+                limit={limitNormal}
+                title='Now playing'
+            />
+            <Collection
+                isHomePage
+                endpoint='/api/movie/upcoming/1'
+                href='/movie/upcoming/1'
+                limit={limitNormal}
+                title='Upcoming'
+            />
+            <Collection
+                isHomePage
+                endpoint='/api/movie/top/1'
+                href='/movie/top/1'
+                limit={limitNormal}
+                title='Top rated'
+            />
 
-  return (
-    <>
-      <Head>
-        <title>Home | Yaps</title>
-      </Head>
-      <SearchBar searchPath={pathToSearchAll} />
-
-      {/* Collection of different groups of movies */}
-      <Collection
-        isHomePage
-        isTrending
-        Component={CardTrending}
-        endpoint='/api/movie/trending/1'
-        href='/movie/trending/1'
-        limit={limitTrending}
-        title='Trending'
-      />
-      <Collection
-        isHomePage
-        endpoint='/api/movie/popular/1'
-        href='/movie/popular/1'
-        limit={limitNormal}
-        title='Popular'
-      />
-      <Collection
-        isHomePage
-        endpoint='/api/movie/now/1'
-        href='/movie/now/1'
-        limit={limitNormal}
-        title='Now playing'
-      />
-      <Collection
-        isHomePage
-        endpoint='/api/movie/upcoming/1'
-        href='/movie/upcoming/1'
-        limit={limitNormal}
-        title='Upcoming'
-      />
-      <Collection
-        isHomePage
-        endpoint='/api/movie/top/1'
-        href='/movie/top/1'
-        limit={limitNormal}
-        title='Top rated'
-      />
-
-      {/* Collection of different groups of tv series */}
-      <Collection
-        isHomePage
-        isTrending
-        Component={CardTrending}
-        endpoint='/api/tv/trending/1'
-        href='/tv/trending/1'
-        limit={limitTrending}
-        media_type='tv'
-        title='Trending'
-        type='tv series'
-      />
-      <Collection
-        isHomePage
-        endpoint='/api/tv/popular/1'
-        href='/tv/popular/1'
-        limit={limitNormal}
-        media_type='tv'
-        title='Popular'
-        type='tv series'
-      />
-      <Collection
-        isHomePage
-        endpoint='/api/tv/airing/1'
-        href='/tv/airing/1'
-        limit={limitNormal}
-        media_type='tv'
-        title='Airing today'
-        type='tv series'
-      />
-      <Collection
-        isHomePage
-        endpoint='/api/tv/onair/1'
-        href='/tv/onair/1'
-        limit={limitNormal}
-        media_type='tv'
-        title='On air'
-        type='tv series'
-      />
-      <Collection
-        isHomePage
-        endpoint='/api/tv/top/1'
-        href='/tv/top/1'
-        limit={limitNormal}
-        media_type='tv'
-        title='Top rated'
-        type='tv series'
-      />
-    </>
-  )
+            {/* Collection of different groups of tv series */}
+            <Collection
+                isHomePage
+                isTrending
+                Component={CardTrending}
+                endpoint='/api/tv/trending/1'
+                href='/tv/trending/1'
+                limit={limitTrending}
+                media_type='tv'
+                title='Trending'
+                type='tv series'
+            />
+            <Collection
+                isHomePage
+                endpoint='/api/tv/popular/1'
+                href='/tv/popular/1'
+                limit={limitNormal}
+                media_type='tv'
+                title='Popular'
+                type='tv series'
+            />
+            <Collection
+                isHomePage
+                endpoint='/api/tv/airing/1'
+                href='/tv/airing/1'
+                limit={limitNormal}
+                media_type='tv'
+                title='Airing today'
+                type='tv series'
+            />
+            <Collection
+                isHomePage
+                endpoint='/api/tv/onair/1'
+                href='/tv/onair/1'
+                limit={limitNormal}
+                media_type='tv'
+                title='On air'
+                type='tv series'
+            />
+            <Collection
+                isHomePage
+                endpoint='/api/tv/top/1'
+                href='/tv/top/1'
+                limit={limitNormal}
+                media_type='tv'
+                title='Top rated'
+                type='tv series'
+            />
+        </>
+    )
 }

pages/latest-top-10.js

@@ -1,195 +1,215 @@
 import React from 'react'
 import { Loader } from '../Common/Loader'
-import { moviesTopListApi } from '../service/service';
-
+import { moviesTopListApi } from '../service/service'
+import Head from 'next/head'
 import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router';
-import Card from '../Common/Card';
-import CardGrid from '../Common/CardGrid';
-import ToastMsg from '../Common/ToastMsg';
-import { CompactList, ExpandedList } from '../SVG/listing';
-
+import { useRouter } from 'next/router'
+import Card from '../Common/Card'
+import CardGrid from '../Common/CardGrid'
+import ToastMsg from '../Common/ToastMsg'
+import { CompactList, ExpandedList } from '../SVG/listing'
 
 const LendingPage = () => {
-
   const router = useRouter()
-  const { category, time } = router.query;
-  const categoryId = category ? category.split(':')[1] : "Movies";
+  const { category, time } = router.query
+  const categoryId = category ? category.split(':')[1] : 'Movies'
 
-  let data = ["Torrents", "Movie", "TV-Show", "Games", "Music", "Anime", "Books", "Other"]
+  let data = [
+    'Torrents',
+    'Movie',
+    'TV-Show',
+    'Games',
+    'Music',
+    'Anime',
+    'Books',
+    'Other',
+  ]
 
   const [movieList, setMovieList] = useState([])
-  const [ListType, setListType] = useState('expanded');
-  const [Filter, setFilter] = useState(false);
+  const [ListType, setListType] = useState('expanded')
+  const [Filter, setFilter] = useState(false)
   const [page, setPage] = useState(1)
   const [loader, setLoader] = useState(false)
-  const[blur,setBlur]=useState(true)
+  const [blur, setBlur] = useState(true)
 
   useEffect(() => {
-
-    fetchMovieList(categoryId);
-
+    fetchMovieList(categoryId)
   }, [page])
 
-
-  const fetchMovieList = (categoryId) => {
-    let latest = time ? time : "10D"
+  const fetchMovieList = categoryId => {
+    let latest = time ? time : '10D'
     setLoader(true)
-    moviesTopListApi(page, categoryId, latest).then((res) => {
-      console.log("page", res?.data?.top_posts_by_category)
-      setLoader(false)
-      setMovieList(res?.data?.top_posts_by_category)
-    }).catch((err) => {
-      console.log("error", err)
-      ToastMsg("Some thing went wrong ", "error")
-      setLoader(false)
-    })
-
+    moviesTopListApi(page, categoryId, latest)
+      .then(res => {
+        console.log('page', res?.data?.top_posts_by_category)
+        setLoader(false)
+        setMovieList(res?.data?.top_posts_by_category)
+      })
+      .catch(err => {
+        console.log('error', err)
+        ToastMsg('Some thing went wrong ', 'error')
+        setLoader(false)
+      })
+  }
+  const css = {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
   }
-  const css ={ top: '50%',
-  left: '50%',
-  right: 'auto',
-  bottom: 'auto',
-  marginRight: '-50%',
-  transform: 'translate(-50%, -50%)',}
   return (
-    <div className='text-center font-montserrat'>
+    <div className='font-montserrat z-10 !overflow-visible text-center'>
+      <Head>
+        <title>Top 10 Movies | Yaps</title>
+      </Head>
       {loader ? <Loader /> : null}
       <br />
 
-      <span className='text-[30px]  font-bold mt-3 pt-3'>Top 10 of All Categories</span>
-      <div className='flex mx-0 md:mx-16 justify-between mb-8'>
-
-
-      </div>
-      <div className='flex justify-center m-2 w-full relative '>
-        <div className=" bg-card w-[54%] rounded-xl  justify-center align-middle p-2">
+      <span className='mt-3  pt-3 text-[30px] font-bold'>
+        Top 10 of All Categories
+      </span>
+      <div className='mx-0 mb-8 flex justify-between md:mx-16'></div>
+      <div className='relative m-2 flex w-full justify-center '>
+        <div className='  flex w-[54%] justify-center rounded-xl bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
           <span>Top 10 Movies</span>
         </div>
       </div>
-     <div>
-     <div className='w-full'>
-     <div className='flex justify-end absolute md:right-[4%] 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 className='z-10 !overflow-visible'>
+        <div className='z-10  w-full !overflow-visible'>
+          <div className='absolute right-0 z-10 flex justify-end md:right-[4%]'>
+            <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>
         </div>
-        </div>
-        <br/>
-        <br/>
-        <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
-          
-        <div className={`flex  flex-wrap py-8 justify-evenly`}>
-          {movieList?.Movies?.map((item, index) => {
-            if (ListType === 'compact') {
-              return (
-                <Card key={index} item={item} categoryId={categoryId} />
-              )
-            } else {
-              return (
-                <CardGrid key={index} item={item} categoryId={categoryId} />
-              )
-            }
-          })}
-        </div>
-      </div>
-      </div>
-
-
-
-
-      <div className='flex m-5 justify-center'>
-        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
-          <span>Top 10 Anime Torrents</span>
-        </div>
-      </div>
-      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
-        <div className={`flex  flex-wrap py-8 justify-evenly`}>
-          {movieList?.Anime?.map((item, index) => {
-           if (ListType === 'compact') {
-              return (
-                <Card key={index} item={item} categoryId={categoryId} />
-              )
-            } else {
-              return (
-                <CardGrid key={index} item={item} categoryId={categoryId} />
-              )
-            }
-          })}
-        </div>
-      </div>
-      <div className='flex m-5 justify-center'>
-        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
-          <span>Top 10 TV Shows</span>
-        </div>
-      </div>
-      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
-
-        <div className={`flex  flex-wrap py-8 justify-evenly`}>
-          {movieList?.TV?.map((item, index) => {
-            if (ListType === 'compact') {
-              return (
-                <Card key={index} item={item} categoryId={categoryId}  />
-              )
-            } else {
-              return (
-                <CardGrid key={index} item={item} categoryId={categoryId}  />
-              )
-            }
-          })}
-        </div>
-      </div>
-
-
-
-      <div className='flex m-5 justify-center'>
-        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
-          <span>Top 10 XXX</span>
-        </div>
-      </div>
-      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
-      {blur? <div className='opacity-100 absolute bottom-[50%] z-10 right-[30%] pl-[25px] pr-[25px] bg-[#204281] rounded-md m-auto flex justify-center ' style={css} onClick={()=>setBlur(false)} >Are You 18+ &#x1F441;</div>:null}
-        <div >
-        
-          <div className={`flex  flex-wrap py-8 justify-evenly ${blur?"blur-md":""}`}>
-          {movieList?.XXX?.map((item, index) => {
-            if (ListType === 'compact') {
-              return (
-                <Card key={index} item={item} categoryId={categoryId} blur={blur} setBlur={setBlur}  />
-              )
-            } else {
-              return (
-                <CardGrid key={index} item={item} categoryId={categoryId} blur={blur} setBlur={setBlur} />
-              )
-            }
-          })}
+        <br />
+        <br />
+        <div className='z-1 relative  mb-[3rem] flex w-auto  overflow-visible rounded-xl p-2 text-center'>
+          <div
+            className={`z-1 flex flex-wrap justify-evenly overflow-visible py-8`}>
+            {movieList?.Movies?.map((item, index) => {
+              if (ListType === 'compact') {
+                return <Card key={index} item={item} categoryId={categoryId} />
+              } else {
+                return (
+                  <CardGrid key={index} item={item} categoryId={categoryId} />
+                )
+              }
+            })}
           </div>
         </div>
       </div>
 
+      <div className='m-5 flex justify-center'>
+        <div className=' flex w-[50%]  justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
+          <span>Top 10 Anime Torrents</span>
+        </div>
+      </div>
+      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
+        <div className={`flex  flex-wrap justify-evenly py-8`}>
+          {movieList?.Anime?.map((item, index) => {
+            if (ListType === 'compact') {
+              return <Card key={index} item={item} categoryId={categoryId} />
+            } else {
+              return (
+                <CardGrid key={index} item={item} categoryId={categoryId} />
+              )
+            }
+          })}
+        </div>
+      </div>
+      <div className='m-5 flex justify-center'>
+        <div className='  flex w-[50%]  justify-center rounded-xl bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
+          <span>Top 10 TV Shows</span>
+        </div>
+      </div>
+      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
+        <div className={`flex  flex-wrap justify-evenly py-8`}>
+          {movieList?.TV?.map((item, index) => {
+            if (ListType === 'compact') {
+              return <Card key={index} item={item} categoryId={categoryId} />
+            } else {
+              return (
+                <CardGrid key={index} item={item} categoryId={categoryId} />
+              )
+            }
+          })}
+        </div>
+      </div>
 
+      <div className='m-5 flex justify-center'>
+        <div className='flex w-[50%]  justify-center rounded-xl  bg-app-shady-white p-2   align-middle dark:bg-app-semi-dark-blue'>
+          <span>Top 10 XXX</span>
+        </div>
+      </div>
+      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
+        {blur ? (
+          <div
+            className='absolute bottom-[50%] right-[30%] z-10 m-auto flex justify-center rounded-md bg-[#204281] pl-[25px] pr-[25px] opacity-100 '
+            style={css}
+            onClick={() => setBlur(false)}>
+            Are You 18+ &#x1F441;
+          </div>
+        ) : null}
+        <div>
+          <div
+            className={`flex  flex-wrap justify-evenly py-8 ${
+              blur ? 'blur-md' : ''
+            }`}>
+            {movieList?.XXX?.map((item, index) => {
+              if (ListType === 'compact') {
+                return (
+                  <Card
+                    key={index}
+                    item={item}
+                    categoryId={categoryId}
+                    blur={blur}
+                    setBlur={setBlur}
+                  />
+                )
+              } else {
+                return (
+                  <CardGrid
+                    key={index}
+                    item={item}
+                    categoryId={categoryId}
+                    blur={blur}
+                    setBlur={setBlur}
+                  />
+                )
+              }
+            })}
+          </div>
+        </div>
+      </div>
 
-      <div className='flex m-5 justify-center'>
-        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
+      <div className='m-5 flex justify-center'>
+        <div className='flex w-[50%] justify-center rounded-xl bg-app-shady-white p-2   align-middle dark:bg-app-semi-dark-blue'>
           <span>Top 10 Music Torrents</span>
-        
-
-
-
         </div>
       </div>
-      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
-
-        <div className={`flex  flex-wrap py-8 justify-evenly`}>
+      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
+        <div className={`flex  flex-wrap justify-evenly py-8`}>
           {movieList?.Music?.map((item, index) => {
-           if (ListType === 'compact') {
-              return (
-                <Card key={index} item={item} categoryId={categoryId} />
-              )
+            if (ListType === 'compact') {
+              return <Card key={index} item={item} categoryId={categoryId} />
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />
@@ -199,24 +219,16 @@ const LendingPage = () => {
         </div>
       </div>
 
-
-      <div className='flex m-5 justify-center'>
-        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
+      <div className='m-5 flex justify-center'>
+        <div className='flex w-[50%] justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
           <span>Top 10 Books Torrents</span>
-        
-
-
-
         </div>
       </div>
-      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
-
-        <div className={`flex  flex-wrap py-8 justify-evenly`}>
+      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
+        <div className={`flex  flex-wrap justify-evenly py-8`}>
           {movieList?.Books?.map((item, index) => {
-           if (ListType === 'compact') {
-              return (
-                <Card key={index} item={item} categoryId={categoryId} />
-              )
+            if (ListType === 'compact') {
+              return <Card key={index} item={item} categoryId={categoryId} />
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />
@@ -226,27 +238,16 @@ const LendingPage = () => {
         </div>
       </div>
 
-      
-
-
-
-      <div className='flex m-5 justify-center'>
-        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
+      <div className='m-5 flex justify-center'>
+        <div className='flex w-[50%] justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
           <span>Top 10 Games Torrents</span>
-        
-
-
-
         </div>
       </div>
-      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
-
-        <div className={`flex  flex-wrap py-8 justify-evenly`}>
+      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
+        <div className={`flex  flex-wrap justify-evenly py-8`}>
           {movieList?.Games?.map((item, index) => {
-           if (ListType === 'compact') {
-              return (
-                <Card key={index} item={item} categoryId={categoryId} />
-              )
+            if (ListType === 'compact') {
+              return <Card key={index} item={item} categoryId={categoryId} />
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />
@@ -256,24 +257,16 @@ const LendingPage = () => {
         </div>
       </div>
 
-
-      <div className='flex m-5 justify-center'>
-        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
+      <div className='m-5 flex justify-center'>
+        <div className='flex w-[50%] justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
           <span>Top 10 Documentaries Torrents</span>
-        
-
-
-
         </div>
       </div>
-      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
-
-        <div className={`flex  flex-wrap py-8 justify-evenly`}>
+      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
+        <div className={`flex  flex-wrap justify-evenly py-8`}>
           {movieList?.Documentaries?.map((item, index) => {
-           if (ListType === 'compact') {
-              return (
-                <Card key={index} item={item} categoryId={categoryId} />
-              )
+            if (ListType === 'compact') {
+              return <Card key={index} item={item} categoryId={categoryId} />
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />
@@ -282,23 +275,16 @@ const LendingPage = () => {
           })}
         </div>
       </div>
-      <div className='flex m-5 justify-center'>
-        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
+      <div className='m-5 flex justify-center'>
+        <div className='flex  w-[50%] justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
           <span>Top 10 Apps Torrents</span>
-        
-
-
-
         </div>
       </div>
-      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
-
-        <div className={`flex  flex-wrap py-8 justify-evenly`}>
+      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
+        <div className={`flex  flex-wrap justify-evenly py-8`}>
           {movieList?.Apps?.map((item, index) => {
-           if (ListType === 'compact') {
-              return (
-                <Card key={index} item={item} categoryId={categoryId} />
-              )
+            if (ListType === 'compact') {
+              return <Card key={index} item={item} categoryId={categoryId} />
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />

pages/login.js

@@ -1,90 +1,103 @@
-
-import { useRouter } from 'next/router';
-import React, { useState } from 'react';
-import { getProfileDetails, loginApi } from '../service/service';
-import { Loader } from '../Common/Loader';
+import {useRouter} from 'next/router';
+import React, {useState} from 'react';
+import {getProfileDetails, loginApi} from '../service/service';
+import {Loader} from '../Common/Loader';
 import ToastMsg from '../Common/ToastMsg';
+import Head from 'next/head'
 
 const Login = () => {
-  const router = useRouter()
-  const { page } = router.query;
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("")
-  const[loader,setLoader]=useState(false)
+    const router = useRouter()
+    const {page} = router.query;
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("")
+    const [loader, setLoader] = useState(false)
+    const [signupbtnclicked, toggleSignUpBtn] = useState(false)
+    const handleSubmit = (e) => {
+        e.preventDefault()
+        if (signupbtnclicked === false) {
+            if (!email) {
+                ToastMsg("Email is Required", "error")
+                return;
+            }
+            if (!email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/)) {
+                ToastMsg("Enter a valid email", "error")
+                return;
+            }
+            if (!password) {
+                ToastMsg("Password is Required", "error")
+                return;
+            }
+            let data = {email: email, password: password}
+            setLoader(true)
+            loginApi(data).then((res) => {
 
-  const handleSubmit =(e)=>{  
-    e.preventDefault()
-    
-    if (!email) {
-      ToastMsg("Email is Required", "error")
-      return;
+                console.log("res", res.data.access)
+                handleProfileDetails(res.data.access)
+                localStorage.setItem("access_token", res.data.access)
+                localStorage.setItem("refresh_token", res.data.refresh)
+
+
+            }).catch((err) => {
+                setLoader(false)
+                console.log(err)
+            })
+        }
     }
-    if(!email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/)){
-      ToastMsg("Enter a valid email", "error")
-      return;
+
+    const handleProfileDetails = (token) => {
+        getProfileDetails(token).then((res) => {
+            setLoader(false)
+            console.log("resprofile", res.data)
+            localStorage.setItem("user_profile", JSON.stringify(res?.data))
+            if (page === "upload") {
+                window.location.href = "/upload";
+            } else {
+                window.location.href = "/";
+            }
+
+        }).catch((err) => {
+            setLoader(false)
+            console.log(err)
+        })
+
+
     }
-    if (!password) {
-      ToastMsg("Password is Required", "error")
-      return;
-    }
-let data ={email:email,password:password}
-setLoader(true)
-    loginApi(data).then((res)=>{
-      
-      console.log("res",res.data.access)
-      handleProfileDetails(res.data.access)
-      localStorage.setItem("access_token",res.data.access)
-      localStorage.setItem("refresh_token",res.data.refresh)
-     
 
-    }).catch((err)=>{
-      setLoader(false)
-      console.log(err)
-    })
+    return (
+        <div className='flex h-[90vh] justify-center items-center'>
+            <Head>
+                <title>Login | Yaps</title>
+            </Head>
+            {loader ? <Loader/> : null}
+            <div className='flex-colomn w-[90%] text-center'>
+                <h1 className='text-[48px] justify-center'>Login</h1>
+                <form onSubmit={handleSubmit}>
+                    <div
+                        className='w-4/4 md:w-4/12 mx-auto flex my-3 items-center border-b-[1px] dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue border-primary px-1'>
+                        <input value={email} type='text'
+                               className='bg-transparent w-full py-4 font-light text-lg outline-none  text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue  placeholder:font-montserrat font-montserrat  '
+                               onChange={(e) => setEmail(e.target.value)} placeholder='Enter Email '/>
+                    </div>
+                    <div className='w-4/4  md:w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
+                        <input value={password} type='password'
+                               className=' bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue font-montserrat'
+                               onChange={(e) => setPassword(e.target.value)} placeholder='Enter Password '/>
+                    </div>
+                    <input
+                        className='px-[50px] mr-[20px] py-[0.35rem] bg-primary/10 rounded text-primary border-primary my-4 text-md hover:bg-primary/30'
+                        style={{border: "solid 0.5px", fontWeight: "400"}} type="submit" value={"Login"}/>
+                    <button
+                        className='px-[50px]  py-[0.35rem] bg-primary/10 text-primary rounded border-primary my-4 text-md hover:bg-primary/30'
+                        style={{border: "solid 0.5px", fontWeight: "400"}} onClick={() => {
+                        router.push("/register")
+                        toggleSignUpBtn(true)
+                    }}>Sign Up
+                    </button>
+                </form>
 
+            </div>
 
-  }
-
-  const handleProfileDetails =(token)=>{
-    getProfileDetails(token).then((res)=>{
-      setLoader(false)
-      console.log("resprofile",res.data)
-      localStorage.setItem("user_profile",JSON.stringify(res?.data))
- if(page==="upload"){
-  window.location.href="/upload";
- }
- else{
-      window.location.href="/";
- }
-
-    }).catch((err)=>{
-      setLoader(false)
-      console.log(err)
-    })
-
-
-
-  }
-
-  return (
-    <div className='flex h-[90vh] justify-center items-center'>
-      {loader?<Loader/>:null}
-      <div className='flex-colomn w-[90%] text-center'>
-        <h1 className='text-[48px] justify-center'>Login</h1>
-        <form onSubmit={handleSubmit} >
-        <div className='w-4/4 md:w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-          <input value={email} type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={(e) => setEmail(e.target.value)} placeholder='Enter Email ' />
         </div>
-        <div className='w-4/4  md:w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-          <input value={password} type='password' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={(e) => setPassword(e.target.value)} placeholder='Enter Password ' />
-        </div>
-        <button className='px-[50px] mr-[20px] py-[0.35rem] bg-primary/10 text-primary border-primary my-4 text-md hover:bg-primary/30' style={{border:"solid 0.5px",fontWeight:"400"}}  type="submit" >Login</button>
-        <button className='px-[50px]  py-[0.35rem] bg-primary/10 text-primary border-primary my-4 text-md hover:bg-primary/30' style={{border:"solid 0.5px",fontWeight:"400"}}  onClick={()=>router.push("/register")} >Sign Up</button>
-        </form>
-      
-      </div>
-      
-    </div>
-  )
+    )
 }
 export default Login

pages/movie/[id].js

@@ -1,6 +1,6 @@
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import {  useState } from 'react'
 import useSWR from 'swr'
 import FilmCasts from '../../components/FilmCasts'
 import FilmGenres from '../../components/FilmGenres'
@@ -12,10 +12,12 @@ import FilmResources from '../../components/FilmResources'
 import FilmSynopsis from '../../components/FilmSynopsis'
 import Loading from '../../components/Loading'
 import SearchBar from '../../components/SearchBar'
-import { fetcher, pathToSearchMovie } from '../../utils'
+import { fetcher, pathToSearchMovie, renderResults, sliceArray } from '../../utils'
 import YouTube from "react-youtube";
 
 import TorrentList from '../../Common/TorrentList'
+import CardNormal from "../../components/CardNormal"
+import Heading from '../../components/Heading'
 
 export default function Movie() {
   const router = useRouter()
@@ -43,9 +45,9 @@ const handleClose =()=>{
 
   return (
     <>
-    
+   
       <Head>
-        <title>{movie?.detail?.title} | </title>
+        <title>{movie?.detail?.title} | YAPS</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'
@@ -92,6 +94,25 @@ const handleClose =()=>{
             : null}
           <br />
        {movie?.credits?.cast?   <FilmCasts casts={movie?.credits?.cast} />:null}
+
+       <section
+          className='w-full overflow-hidden md:mb-10 lg:overflow-visible'>
+          <Heading
+            title={"You may like also"}
+            isHomePage={true}
+            isTrending={true}
+            media_type={false}
+          />
+          <section
+            className={
+             'h-scroll relative flex gap-x-4 overflow-x-scroll  sm:gap-x-10 2xs:mt-2'   }>
+            {renderResults(
+              sliceArray(movie?.detail?.recommendations?.results || [], movie?.detail?.recommendations?.results.length),
+              CardNormal,
+              "movie"
+            )}
+          </section>
+        </section>
         </div>
       ) : (
         <Loading />
@@ -108,7 +129,7 @@ export function renderRating(rating) {
   }
 }
 
-function renderLength(runtime) {
+export function renderLength(runtime) {
   if (runtime !== 0 && runtime !== undefined) {
     return runtime + ' min?.'
   } else {
@@ -124,7 +145,7 @@ export function renderLanguage(languages) {
   }
 }
 
-function renderYear(year) {
+export function renderYear(year) {
   if (!year) {
     return 'N/A'
   } else {

pages/play/movies.js

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+import useSWR from 'swr'
+import { BsFillLightbulbFill } from 'react-icons/bs'
+import { useTheme } from 'next-themes'
+
+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 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('vidsrc.to')
+  const { data } = useSWR(`/api/movie/${id}`, fetcher)
+  useEffect(() => {
+    if (localStorage.getItem('userWatched')) {
+      let data = JSON.parse(localStorage.getItem('userWatched'))
+      let moviePresent = false
+      for (let i in data.movies) {
+        if (id)
+          if (data.movies[i] === id) {
+            moviePresent = true
+          } else {
+            if (data.movies === tmdb) {
+              moviePresent = true
+            }
+          }
+      }
+      if (id || tmdb) {
+        if (!moviePresent) {
+          if (id) data.movies.push(id)
+          else data.movies.push(tmdb)
+          localStorage.setItem('userWatched', JSON.stringify(data))
+        }
+      }
+    } else {
+      if (id || tmdb)
+        localStorage.setItem(
+          'userWatched',
+          JSON.stringify({
+            movies: [id ? id : tmdb],
+            tv: [],
+          })
+        )
+    }
+  }, [id, tmdb])
+  useEffect(() => {
+    document.addEventListener('mousedown', event => {
+      if (
+        event.target !== 'iframe' &&
+        event.target.tagName.toLowerCase() !== 'span'
+      ) {
+        switchLight(false)
+      }
+    })
+  }, [])
+  return (
+    <>
+      <Head>
+        <title>Play Movies | Yaps</title>
+      </Head>
+      <div
+        className={` left-0 top-0 z-[997] bg-black  transition duration-300 ease-in-out ${
+          lightStatus
+            ? 'opacity-0.5 fixed h-screen w-full '
+            : 'h-0 w-0 opacity-0'
+        }`}></div>
+      <div className={'text-4xl'}>{data ? data.imdb.imdb.name : ''}</div>
+      <div className={`w-full  ${lightStatus ? '' : 'h-full'} z-[999] `}>
+        <div className={` flex  h-full w-full  flex-col`}>
+          <iframe
+            src={
+              videoServer !== 'vidsrc.to' ? videoServer : servers_[0].link + to
+            }
+            className={`z-[998] ${
+              lightStatus
+                ? 'absolute left-0 h-[80vh] w-full lg:left-[20%] lg:w-2/3 '
+                : 'h-[95vh] w-full'
+            }`}
+            allowFullScreen='allowfullscreen'></iframe>
+          <div
+            className={`${
+              lightStatus
+                ? 'absolute w-1/2 text-white dark:text-black '
+                : 'w-full '
+            } top-[100%] z-[999] flex flex-row items-center justify-start gap-10 bg-transparent  p-4 pl-0 lg:top-[90%] `}>
+            <div
+              onClick={() => switchLight(!lightStatus)}
+              className={
+                'flex flex-row items-center gap-1 transition duration-300 ease-in-out hover:cursor-pointer hover:text-orange-500'
+              }>
+              <BsFillLightbulbFill />
+              <span>Light</span>
+            </div>
+          </div>
+          <div
+            className={`${
+              lightStatus ? 'hidden' : 'flex'
+            }  flex h-36 w-full  items-center justify-start`}>
+            <div className={'flex h-full w-full flex-row rounded '}>
+              <div
+                className={`${
+                  theme === 'dark' ? 'bg-app-dark-blue' : ''
+                } flex h-full  w-1/3 flex-col items-center justify-center p-2 text-center`}>
+                {`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={`${
+                  theme === 'dark' ? 'bg-app-dark-blue' : ''
+                } h-full  w-2/3 text-black`}>
+                <div
+                  className={
+                    'flex h-10 w-full flex-row flex-wrap items-center justify-start gap-7 p-5'
+                  }>
+                  {servers_.map((server, index) => {
+                    return (
+                      <div
+                        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={` ${
+                          videoServer.includes(server.servername.toLowerCase())
+                            ? ' bg-app-greyish-blue text-white '
+                            : ''
+                        } h-12 w-max rounded p-4 pt-3 text-center transition  duration-300 ease-in-out hover:scale-110 hover:cursor-pointer hover:bg-app-greyish-blue hover:text-white dark:text-white`}
+                        key={index}>
+                        {server.servername}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+export default Movies

pages/play/tv.js

@@ -0,0 +1,508 @@
+import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+import { AiOutlineDown, AiOutlineRight } from 'react-icons/ai'
+import useSWR from 'swr'
+import { BsFillLightbulbFill } from 'react-icons/bs'
+import {
+  BiSolidSkipNextCircle,
+  BiSolidSkipPreviousCircle,
+} from 'react-icons/bi'
+import { useTheme } from 'next-themes'
+
+const servers_ = [
+  {
+    servername: 'Vidsrc.to',
+    link: 'https://vidsrc.to/embed/tv/',
+  },
+  {
+    servername: 'Vidsrc.me',
+    link: 'https://vidsrc.me/embed/tv?',
+  },
+  {
+    servername: 'Moviesapi.club',
+    link: 'https://moviesapi.club/tv/',
+  },
+  {
+    servername: 'Blackvid',
+    link: 'https://blackvid.space/embed?tmdb=',
+  },
+]
+const fetcher = (...args) => fetch(...args).then(res => res.json())
+
+const Tv = () => {
+  const router = useRouter()
+  const { id, tmdb } = router.query
+  const { theme, setTheme } = useTheme()
+  const { data } = useSWR(`/api/tv/${tmdb}`, fetcher)
+  const [tvDetails, setTvDetails] = useState({
+    episode: 1,
+    season: 1,
+  })
+  const [season, SetSeason] = useState([])
+  const [episodes, setEpisodes] = useState({})
+  const [seasonDropDown, setSeasonDropDown] = useState(false)
+  const [episodeDropDown, setEpisodeDropDown] = useState(false)
+  const [videoServer, setVideoServer] = useState(`vidsrc.to`)
+  const [lightStatus, switchLight] = useState(false)
+  const [nextBtn, showNextBtn] = useState(true)
+  const [prevBtn, showPrevBtn] = useState(true)
+  const [nextprevbtnclicked, setnextprevbtnclicked] = useState(false)
+  useEffect(() => {
+    let temp = []
+    if (data)
+      if (data.detail.seasons[0].name.includes('Specials'))
+        for (let i = 1; i < data.detail.seasons.length; i++) {
+          temp.push(i)
+        }
+      else
+        for (let i = 1; i <= data.detail.seasons.length; i++) {
+          temp.push(i)
+        }
+    SetSeason(temp)
+    let episode = []
+    let c = 1
+    if (data) {
+      if (data.detail.seasons[0].name.includes('Specials')) {
+        for (let k = 0; k < temp.length; k++) {
+          for (let i = 1; i < data.detail.seasons[c].episode_count + 1; i++)
+            episode.push(i)
+          episodes[c] = episode
+          c++
+          episode = []
+        }
+      } else {
+        c = 0
+        for (let k = 0; k < temp.length; k++) {
+          for (let i = 1; i < data.detail.seasons[c].episode_count + 1; i++)
+            episode.push(i)
+          episodes[c + 1] = episode
+          c++
+          episode = []
+        }
+      }
+    }
+  }, [seasonDropDown, episodeDropDown, nextprevbtnclicked])
+  useEffect(() => {
+    console.log(theme)
+    if (localStorage.getItem('userWatched')) {
+      let data = JSON.parse(localStorage.getItem('userWatched'))
+      let tvPresent = -1
+      if (id || tmdb) {
+        for (let i in data.tv) {
+          if (id) {
+            if (data.tv[i][0] === id) {
+              tvPresent = i
+            }
+          } else {
+            if (data.tv[i][0] === tmdb) {
+              tvPresent = i
+            }
+          }
+        }
+      }
+      if (id || tmdb)
+        if (tvPresent !== -1) {
+          setTvDetails({ season: data.tv[i][1], episode: data.tv[i][2] })
+        } else {
+          if (id || tmdb) {
+            if (id) data.tv.push([id, tvDetails.season, tvDetails.episode])
+            else data.tv.push([tmdb, tvDetails.season, tvDetails.episode])
+            localStorage.setItem('userWatched', JSON.stringify(data))
+          }
+        }
+    } else {
+      if (id || tmdb)
+        localStorage.setItem(
+          'userWatched',
+          JSON.stringify({
+            movies: [],
+            tv: [[id ? id : tmdb, tvDetails.season, tvDetails.episode]],
+          })
+        )
+    }
+  }, [id, tmdb])
+  useEffect(() => {
+    if (data !== undefined) {
+      if (localStorage.getItem('userWatched')) {
+        let dataa = JSON.parse(localStorage.getItem('userWatched'))
+        let tvPresent = -1
+        if (id || tmdb) {
+          for (let i in dataa.tv) {
+            if (id) {
+              if (dataa.tv[i][0] === id) {
+                tvPresent = i
+              }
+            } else {
+              if (dataa.tv[i][0] === tmdb) {
+                tvPresent = i
+              }
+            }
+          }
+        }
+        if (id || tmdb)
+          if (tvPresent !== -1) {
+            if (id)
+              dataa.tv[tvPresent] = [id, tvDetails.season, tvDetails.episode]
+            else
+              dataa.tv[tvPresent] = [tmdb, tvDetails.season, tvDetails.episode]
+            localStorage.setItem('userWatched', JSON.stringify(dataa))
+          } else {
+            if (id || tmdb) {
+              if (id) dataa.tv.push([id, tvDetails.season, tvDetails.episode])
+              else dataa.tv.push([tmdb, tvDetails.season, tvDetails.episode])
+              localStorage.setItem('userWatched', JSON.stringify(dataa))
+            }
+          }
+      }
+      if (tvDetails.season === 1 && tvDetails.episode === 1) {
+        showPrevBtn(false)
+      } else {
+        showPrevBtn(true)
+      }
+      if (
+        tvDetails.season === season[season.length - 1] &&
+        tvDetails.episode ===
+          episodes[tvDetails.season][episodes[tvDetails.season].length - 1]
+      ) {
+        showNextBtn(false)
+      } else {
+        showNextBtn(true)
+      }
+      let inputstrings = `${data?.detail.name}season`
+      let inputStringe = `${data?.detail.name}episode`
+      if (
+        localStorage.getItem(inputstrings.replace(/\s+/g, '').toLowerCase())
+      ) {
+        localStorage.setItem(
+          inputstrings.replace(/\s+/g, '').toLowerCase(),
+          tvDetails.season
+        )
+      }
+      if (
+        localStorage.getItem(inputStringe.replace(/\s+/g, '').toLowerCase())
+      ) {
+        localStorage.setItem(
+          inputStringe.replace(/\s+/g, '').toLowerCase(),
+          tvDetails.episode
+        )
+      }
+      if (videoServer.includes('vidsrc.me'))
+        setVideoServer(
+          `https://vidsrc.me/embed/tv?${
+            tmdb ? `tmdb=${tmdb}` : `imdb=${id}`
+          }&season=${tvDetails.season}&episode=${tvDetails.episode}`
+        )
+      if (videoServer.includes('vidsrc.to'))
+        setVideoServer(
+          `https://vidsrc.to/embed/tv/${tmdb ? `${tmdb}` : `${id}`}/${
+            tvDetails.season
+          }/${tvDetails.episode}`
+        )
+      else if (videoServer.includes('moviesapi.club'))
+        setVideoServer(
+          `https://moviesapi.club/tv/${tmdb}-${tvDetails.season}-${tvDetails.episode}`
+        )
+      else if (videoServer.includes('blackvid.space'))
+        setVideoServer(
+          `https://blackvid.space/embed?tmdb=${tmdb}&season=${tvDetails.season}&episode=${tvDetails.episode}`
+        )
+    }
+  }, [tvDetails])
+  console.log(data?.detail?.seasons[0].poster_path)
+
+  //adding event listener for window to catch left click to remove light setting
+  useEffect(() => {
+    document.addEventListener('mousedown', event => {
+      if (
+        event.target !== 'iframe' &&
+        event.target.tagName.toLowerCase() !== 'span'
+      ) {
+        switchLight(false)
+      }
+    })
+  }, [])
+  return (
+    <>
+      <Head>
+        <title>Play Tv | Yaps</title>
+      </Head>
+      <div
+        className={`left-0  top-0 z-[997] w-full bg-black transition duration-300 ease-in-out ${
+          lightStatus ? 'opacity-1 fixed h-screen ' : 'h-0 w-0 opacity-0'
+        }`}></div>
+      <div
+        className={` flex w-full flex-col   ${
+          lightStatus ? '' : 'h-full'
+        } z-[999] h-full`}>
+        {/*<img src={`${TMDB_IMAGE_ENDPOINT}/${images}`}/>*/}
+        <div className={'h-16 w-full pb-2 text-3xl'}>
+          {data?.detail.name} S{tvDetails.season} E{tvDetails.episode}
+        </div>
+        <iframe
+          src={
+            videoServer !== 'vidsrc.to'
+              ? 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={
+            'flex w-full flex-row items-center justify-between gap-10 bg-transparent p-4 pl-0'
+          }>
+          <div>
+            <div
+              className={'relative flex w-44 items-center justify-start gap-1'}>
+              <div className={'relative'}>
+                <BiSolidSkipPreviousCircle
+                  size={35}
+                  onClick={() => {
+                    setnextprevbtnclicked(true)
+                    let current_Episode = tvDetails.episode
+                    let current_Season = tvDetails.season
+                    if (episodes[current_Season]) {
+                      if (
+                        episodes[current_Season].indexOf(current_Episode) === 0
+                      ) {
+                        if (season.indexOf(tvDetails.season) !== 0) {
+                          setTvDetails({
+                            season: current_Season - 1,
+                            episode:
+                              episodes[current_Season - 1][
+                                episodes[current_Season].length - 1
+                              ],
+                          })
+                        }
+                      } else {
+                        setTvDetails(prev => {
+                          return { ...prev, episode: current_Episode - 1 }
+                        })
+                      }
+                    }
+                  }}
+                  className={`${
+                    prevBtn ? 'block' : 'hidden'
+                  } control-button transition duration-300 ease-in-out hover:scale-125`}
+                />
+                <div
+                  className={
+                    'tooltip-div absolute left-5 z-50 hidden w-10 bg-[#222222] text-center'
+                  }>
+                  Prev
+                </div>
+              </div>
+              <div
+                className={'relative'}
+                onClick={() => {
+                  let current_Episode = tvDetails.episode
+                  let current_Season = tvDetails.season
+                  setnextprevbtnclicked(true)
+                  if (episodes[tvDetails.season]) {
+                    if (
+                      episodes[tvDetails.season].indexOf(current_Episode) ===
+                      episodes[tvDetails.season].length - 1
+                    ) {
+                      if (
+                        season.indexOf(tvDetails.season) !==
+                        season.length - 1
+                      ) {
+                        setTvDetails({
+                          season: current_Season + 1,
+                          episode: 1,
+                        })
+                      }
+                    } else {
+                      setTvDetails(prev => {
+                        return { ...prev, episode: current_Episode + 1 }
+                      })
+                    }
+                  }
+                }}>
+                <BiSolidSkipNextCircle
+                  size={35}
+                  className={`${
+                    nextBtn ? 'block' : 'hidden'
+                  } control-button transition duration-300 ease-in-out hover:scale-125`}
+                />
+                <div
+                  className={
+                    'tooltip-div absolute left-5 z-50 hidden w-10 bg-[#222222] text-center'
+                  }>
+                  Next
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className={`flex items-center justify-center gap-10 ${
+              lightStatus ? 'text-white' : ''
+            }`}>
+            <div
+              onClick={() => switchLight(!lightStatus)}
+              className={
+                'flex flex-row items-center gap-1 transition duration-300 ease-in-out hover:cursor-pointer hover:text-orange-500'
+              }>
+              <BsFillLightbulbFill />
+              <span>Light</span>
+            </div>
+            <div className={'relative w-32 '}>
+              <div
+                className={
+                  'z-50 flex cursor-pointer flex-row items-center justify-center   gap-2 rounded bg-[#151515] text-white  outline-0 dark:bg-inherit'
+                }
+                onClick={() => {
+                  setSeasonDropDown(!seasonDropDown)
+                  setEpisodeDropDown(false)
+                }}>
+                Season {tvDetails.season}
+                <span className={'pt-1 transition duration-300 ease-in-out'}>
+                  {seasonDropDown ? <AiOutlineDown /> : <AiOutlineRight />}
+                </span>
+              </div>
+              <div
+                className={` absolute  z-40  h-44 w-44  flex-col  items-center justify-center overflow-y-scroll font-normal text-white transition duration-300 ease-in-out ${
+                  seasonDropDown
+                    ? 'opacity-1 translate-y-0'
+                    : 'translate-y-[-150%]   opacity-0'
+                } `}>
+                <ul className={''}>
+                  {season !== [] ? (
+                    season.map((season, index) => {
+                      return (
+                        <li
+                          key={index}
+                          onClick={() => {
+                            setTvDetails({ season: season, episode: 1 })
+                            setSeasonDropDown(false)
+                          }}
+                          className={`dropdown-scroll relative flex  h-12 w-full items-center justify-evenly bg-app-semi-dark-blue pl-2 hover:cursor-pointer hover:bg-amber-700 ${
+                            tvDetails.season === season ? 'bg-amber-700' : ''
+                          }`}>
+                          Season <span>{season}</span>
+                        </li>
+                      )
+                    })
+                  ) : (
+                    <li>No Seasons</li>
+                  )}
+                </ul>
+              </div>
+            </div>
+            <div className={'relative w-32 '}>
+              <div
+                className={
+                  'z-50 flex flex-row items-center justify-center gap-2 rounded   bg-[#151515] text-white dark:bg-inherit'
+                }
+                onClick={() => {
+                  setEpisodeDropDown(!episodeDropDown)
+                  setSeasonDropDown(false)
+                }}>
+                Episode {tvDetails.episode}
+                <span className={'pt-1 transition duration-300 ease-in-out'}>
+                  {episodeDropDown ? <AiOutlineDown /> : <AiOutlineRight />}
+                </span>
+              </div>
+              <div
+                className={` absolute   z-40 h-44 w-44 flex-col  items-center  justify-center overflow-y-scroll bg-app-semi-dark-blue font-normal text-white transition duration-300 ease-in-out ${
+                  episodeDropDown
+                    ? 'opacity-1 translate-y-0'
+                    : 'translate-y-[-150%]   opacity-0'
+                } `}>
+                <ul className={''}>
+                  {episodes[tvDetails.season] ? (
+                    episodes[tvDetails.season].map((episode, index) => {
+                      return (
+                        <li
+                          key={index}
+                          onClick={() => {
+                            setTvDetails(prev => {
+                              return { ...prev, episode: episode }
+                            })
+                            setEpisodeDropDown(false)
+                          }}
+                          className={`dropdown-scroll relative  flex h-12 w-full items-center justify-evenly pl-2 hover:cursor-pointer hover:bg-amber-700 ${
+                            tvDetails.episode === episode ? 'bg-amber-700' : ''
+                          }`}>
+                          Episode <span>{episode}</span>
+                        </li>
+                      )
+                    })
+                  ) : (
+                    <li>No Episode</li>
+                  )}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={` ${
+            lightStatus ? 'hidden' : 'flex'
+          } h-36 w-full  items-center justify-start`}>
+          <div className={'flex h-full w-full flex-row rounded '}>
+            <div
+              className={`h-full w-1/3 p-2 text-center text-black dark:text-white`}>
+              {`You are watching `}
+              <div className={' font-bold'}>{data ? data.detail.name : ''}</div>
+              <div>
+                {' '}
+                If current server doesn't work please try other servers beside.
+              </div>
+            </div>
+            <div className={` h-full w-2/3`}>
+              <div
+                className={
+                  'flex h-10 w-full flex-row flex-wrap items-center justify-start gap-7 p-5'
+                }>
+                {servers_.map((server, index) => {
+                  return (
+                    <div
+                      onClick={() => {
+                        if (server.servername === 'Vidsrc.me')
+                          setVideoServer(
+                            `${server.link}${
+                              tmdb ? `tmdb=${tmdb}` : `imdb=${id}`
+                            }&season=${tvDetails.season}&episode=${
+                              tvDetails.episode
+                            }`
+                          )
+                        else if (server.servername === 'Vidsrc.to')
+                          setVideoServer(
+                            `${server.link}${tmdb ? `${tmdb}` : `${id}`}/${
+                              tvDetails.season
+                            }/${tvDetails.episode}`
+                          )
+                        else if (server.servername === 'Moviesapi.club')
+                          setVideoServer(
+                            `${server.link}${tmdb}-${tvDetails.season}-${tvDetails.episode}`
+                          )
+                        else
+                          setVideoServer(
+                            `${server.link}${tmdb}&season=${tvDetails.season}&episode=${tvDetails.episode}`
+                          )
+                      }}
+                      className={`  ${
+                        videoServer.includes(server.servername.toLowerCase())
+                          ? 'bg-app-greyish-blue'
+                          : ''
+                      } h-8 w-max rounded p-3 text-center transition duration-300 ease-in-out hover:scale-110 hover:cursor-pointer dark:text-white `}
+                      key={index}>
+                      {server.servername}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Tv

pages/post-detail/[id]/[slug].js

@@ -1,149 +1,189 @@
-import { useRouter } from 'next/router';
-import React, { useEffect, useState, useSyncExternalStore } 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 { 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 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) => {
-    tracker = tracker + temp + 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}${tracker}`
+        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')
+    }
+  }
+  console.log(data);
 
   return (
     <div>
       {loader ? <Loader /> : null}
-
-      <div className='w-full pb-5 m-auto'>
-        <div className="w-full bg-card 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' />
+      <Head>
+        <title>{data?.name} | Yaps</title>
+      </Head>
+      <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" }}> &#128077; {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' }}>
+                {' '}
+                &#128077; {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" }}> &#x1F44D; 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>
@@ -156,123 +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-4 text-[15px] rounded bg-gradient-to-r from-green-400 via-purple-500  to-purple-600  hover:text-primary' onClick={() => {
-                  window.open(torrentDownload, '_blank')
-                }} >Torrent Download</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-primary' onClick={() => {
-                  window.open(magnateDownload, '_blank')
-                }}  >&#129522; 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>
+               {data?.imdb && <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(`/play/${data?.category_str.toLowerCase()}?id=${data?.imdb}&tmdb=${data?.imdb_data.tmdb_id}`)
+                  }}>
+                  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()
+                  }}>
+                  &#129522; 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')
+                  }}>
+                  &#129522; 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()
-                }} > &#8634; 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" }} > !&#x20DD; 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()
+                  }}>
+                  {' '}
+                  &#8634; 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 bg-card 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-medium 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='bg-card 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 bg-card 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 bg-card 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] bg-card 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

pages/register.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Loader } from '../Common/Loader';
 import ToastMsg from '../Common/ToastMsg';
 import { registerApi } from '../service/service';
-
+import Head from 'next/head'
 
 const Register = () => {
   const router = useRouter()
@@ -63,24 +63,27 @@ const Register = () => {
   }
   return (
     <div className='flex h-[90vh] justify-center items-center'>
+       <Head>
+        <title>Register | Yaps</title>
+      </Head>
       {loader ? <Loader /> : null}
       <div className='flex-colomn w-[90%] text-center'>
         <h1 className='text-[48px] justify-center'>Register Here</h1>
         <form onSubmit={handleSubmit}>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.first_name} maxLength={35} name="first_name" type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter First Name ' />
+            <input value={formInput?.first_name} maxLength={35} name="first_name" type='text' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter First Name ' />
           </div>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.last_name} maxLength={35} name="last_name" type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Last Name ' />
+            <input value={formInput?.last_name} maxLength={35} name="last_name" type='text' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Last Name ' />
           </div>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.username} maxLength={35} name="username" type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter username' />
+            <input value={formInput?.username} maxLength={35} name="username" type='text' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter username' />
           </div>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.email} maxLength={35} name="email" type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Email' />
+            <input value={formInput?.email} maxLength={35} name="email" type='text' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Email' />
           </div>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.password} maxLength={50} name="password" type='password' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Password ' />
+            <input value={formInput?.password} maxLength={50} name="password" type='password' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Password ' />
           </div>
 
           <button className='px-[50px] py-[0.35rem] bg-primary/10 text-primary border-primary my-4 text-md hover:bg-primary/30' style={{ border: "solid 0.5px", fontWeight: "400" }} type="submit" >Submit</button>

pages/search.js

@@ -1,15 +1,32 @@
 import CardCompact from '../Common/CardCompact'
 import CardExpanded from '../Common/CardExpanded'
 import { useRouter } from 'next/router'
-import React, { useState } from 'react'
-import { SearchSVG, MovieSVG } from '../SVG/search'
-import { getSearchResult } from '../service/service';
+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'
-
-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 Head from 'next/head'
+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()
@@ -17,117 +34,166 @@ const Home = () => {
   const [movieList, setMovieList] = useState([])
   const [search, setSearch] = useState(false)
   const [loader, setLoader] = useState(false)
-  const [ListType, setListType] = useState('expanded');
+  const [ListType, setListType] = useState('expanded')
   const [searchSuccess, setSearchSuccess] = useState(false)
-  const[checkboxInput,setCheckboxInput]=useState([])
-
-  const searchResult = (e) => {
+  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)
-    })
+    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)
+  const handleCheckboxChange = event => {
+    const { value, checked } = event.target
+    console.log('event', checked, value)
     if (checked) {
-      setCheckboxInput([...checkboxInput, value]);
+      setCheckboxInput([...checkboxInput, value])
     } else {
-      setCheckboxInput(checkboxInput.filter((item) => item !== value));
+      setCheckboxInput(checkboxInput.filter(item => item !== value))
     }
-  };
+  }
 
-console.log("pp",checkboxInput)
   return (
-    <div className="container  mx-auto py-3 font-medium bg-transparent min-h-screen  justify-center text-center font-montserrat">
+    <div className='font-montserrat  container mx-auto min-h-screen justify-center bg-transparent  py-3 text-center font-light'>
+      <Head>
+        <title>Search | 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>
+        <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='w-10/12 md:w-1/2 mx-auto flex my-10 items-center border-b-[1.5px] border-primary px-1'>
-            <input className='bg-transparent w-full py-4 font-light text-lg outline-none placeholder:font-montserrat font-montserrat' placeholder='Start typing what you want ?' onChange={(e) => setSearch(e.target.value)} />
-             <div onClick={(e) => { searchResult(e) }}>
+          <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 text-center justify-center'>
-            <div className='font-thin flex flex-wrap 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 checked:border-primary border border-primary' onChange={handleCheckboxChange} checked={checkboxInput?.includes(item?.cat)} />
-                      <span>{item?.name}</span>
-                    </label>
-
-                  )
-                })
-              }
+          <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='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>}
+          {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='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.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} />
-                )
+                return <CardCompact key={index} item={item} />
               } else {
-                return (
-                  <CardExpanded  key={index} item={item} />
-                )
+                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' 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-off-white/10 rounded-lg border-off-white/30 flex-col justify-start items-center md:items-start gap-3.5 inline-flex hover:bg-primary/10 border-[1px] 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 group-hover:text-primary text-opacity-80 text-[13px] w-20 text-center md:text-start leading-[0px] ">{item?.name}</div>
+          <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>

pages/tv/[id].js

@@ -50,6 +50,8 @@ export default function TV() {
             <FilmResources
               website={tv.detail.homepage}
               imdb={tv.detail.imdb_id}
+              tmdb={id}
+              path={router.pathname}
             />
           </section>
         </section>

pages/upload.js

@@ -6,7 +6,7 @@ import { useRouter } from 'next/router';
 import Select from 'react-select';
 import { formatBytes } from '../Common/CardExpanded';
 
-
+import Head from 'next/head'
 const Upload = () => {
   const [token, setToken] = useState("")
   const [loader, setLoader] = useState(false)
@@ -23,20 +23,20 @@ const Upload = () => {
     let temp = data && JSON.parse(data)
 
     const _data = temp && temp?.genre.map((item, index) => {
-      return { value:item, label:item };
+      return { value: item, label: item };
     })
     setFormInput(temp)
     setImageArray(temp?.images)
     setSelectedOption(temp?.genre)
     setFileInput(temp?.images)
 
-   
-  setSelectedOption(_data)
+
+    setSelectedOption(_data)
     return setToken(localStorage.getItem("access_token"));
   }, [])
-useEffect(()=>{
+  useEffect(() => {
 
-},[])
+  }, [])
 
   console.log("formInput", formInput)
   console.log("select", selectedOption)
@@ -203,7 +203,7 @@ useEffect(()=>{
     }
 
     let data = {
-      eid:formInput?.eid,
+      eid: formInput?.eid,
       name: formInput?.name,
       category_str: formInput?.category_str,
       short_name: formInput?.short_name,
@@ -240,7 +240,7 @@ useEffect(()=>{
     })
   }
 
-  
+
 
 
   console.log("pppp", errors)
@@ -297,36 +297,39 @@ useEffect(()=>{
 
   return (
     <div>
+       <Head>
+        <title>Upload | Yaps</title>
+      </Head>
       {loader ? <Loader /> : null}
       <div className='w-[50%] pb-5 m-auto'>
 
         <div className='text-center justify-center mt-2'> <span className='text-[16px]  font-bold mt-3 pt-3'>You can get Image URL from : <a href="https://freeimage.host/" className='text-blue-600' target="_blank" rel="noreferrer">https://freeimage.host/</a></span>  </div>
         <div className="mt-[3rem] justify-center pt-5 pb-2 bg-gray-200 bg-opacity-10 rounded-lg border-gray-200 border-opacity-30 flex relative">
 
-          <form onSubmit={(e)=>{
-            if(formInput?.eid){
+          <form onSubmit={(e) => {
+            if (formInput?.eid) {
               handleUpdated(e)
             }
-            else{
-            handleUpload(e)
+            else {
+              handleUpload(e)
             }
-            }} className='w-[85%]'>
+          }} className='w-[85%]'>
             <div className="grid gap-6 mb-6 md:grid-cols-2">
               <div>
-                <label htmlFor="first_name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title name</label>
+                <label htmlFor="first_name" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Title name</label>
                 <input type="text" id="first_name" name="name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Name" value={formInput?.name} onChange={handleChange} />
                 <span className='text-red-400 text-[13px] '>{errors?.name}</span>
               </div>
 
               <div>
-                <label htmlFor="file" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Short Name</label>
+                <label htmlFor="file" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Short Name</label>
                 <input type="text" id="id" name="short_name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-[7px] dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Short Name" value={formInput?.short_name} onChange={handleChange} />
                 <span className='text-red-400 text-[13px] '>{errors?.short_name}</span>
               </div>
 
 
               <div>
-                <label htmlFor="language" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Language</label>
+                <label htmlFor="language" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Language</label>
                 <select name="language" id="language" className="bg-gray-50 cursor-pointer border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value={formInput?.language} onChange={handleChange} placeholder="Flowbite"  >
                   <option >
                     Select
@@ -342,7 +345,7 @@ useEffect(()=>{
                 <span className='text-red-400 text-[13px] '>{errors?.language}</span>
               </div>
               <div>
-                <label htmlFor="category_str" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Category</label>
+                <label htmlFor="category_str" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Category</label>
                 <select id="category_str" name="category_str" className="bg-gray-50 cursor-pointer border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value={formInput?.category_str} onChange={handleChange} placeholder="Flowbite" >
                   <option>
                     Select
@@ -362,7 +365,7 @@ useEffect(()=>{
 
 
               <div>
-                <label htmlFor="language" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Type</label>
+                <label htmlFor="language" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Type</label>
                 <select name="type" id="language" className="bg-gray-50 border cursor-pointer border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value={formInput?.type} onChange={handleChange} placeholder="Flowbite" >
                   <option>
                     Select
@@ -378,7 +381,7 @@ useEffect(()=>{
                 <span className='text-red-400 text-[13px] '>{errors?.type}</span>
               </div>
               <div >
-                <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Size (in Bytes)</label>
+                <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Size (in Bytes)</label>
 
 
                 <div className='flex relative'>
@@ -391,7 +394,7 @@ useEffect(()=>{
 
               </div>
               <div >
-                <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Imdb ID</label>
+                <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Imdb ID</label>
 
 
                 <div className='flex relative'>
@@ -406,13 +409,13 @@ useEffect(()=>{
 
             </div>
             <div className="mb-6 text-white">
-              <label htmlFor="category_str" className="block mb-2 text-sm font-medium text-white dark:text-white">Genre</label>
+              <label htmlFor="category_str" className="block mb-2 text-sm font-light text-white dark:text-white">Genre</label>
               <Select
                 className="react-select-container "
                 classNamePrefix="react-select"
                 defaultValue={selectedOption}
                 onChange={setSelectedOption}
-              
+
                 isMulti={true}
                 options={genre}
                 isSearchable
@@ -421,7 +424,7 @@ useEffect(()=>{
                   colors: {
                     ...theme.colors,
                     primary25: '#55aa7b',
-  
+
                   },
                 })}
 
@@ -431,7 +434,7 @@ useEffect(()=>{
 
 
             <div className="mb-6">
-              <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Thumbnail Images Urls</label>
+              <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Thumbnail Images Urls</label>
 
 
               <div className='flex relative'>
@@ -445,12 +448,12 @@ useEffect(()=>{
             </div>
 
             <div className="mb-6">
-              <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Add Images Urls</label>
+              <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Add Images Urls</label>
               {
-              fileInput&&  fileInput.map((item, index) => {
+                fileInput && fileInput.map((item, index) => {
                   return (
                     <div key={index} className='flex relative'>
-                      <input type="text" name={"image" + index} id="info_hash" className="bg-gray-50 mb-2 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Image url" value={formInput?.[`image${index}`]||item} onChange={(e) => {
+                      <input type="text" name={"image" + index} id="info_hash" className="bg-gray-50 mb-2 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Image url" value={formInput?.[`image${index}`] || item} onChange={(e) => {
 
                         let _data = [...imageArray]
                         _data[index] = e.target.value;
@@ -468,13 +471,13 @@ useEffect(()=>{
 
             </div>
             <div className="mb-6">
-              <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Torrent Hash</label>
+              <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Torrent Hash</label>
               <input type="text" name="info_hash" id="info_hash" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="309626C8000F9C006782B097E7B6EAADD7F7C3E7" value={formInput?.info_hash} onChange={handleChange} />
               <span className='text-red-400 text-[13px] '>{errors?.info_hash}</span>
             </div>
 
             <div className="mb-6">
-              <label htmlFor="tag" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Torrent Descriptions</label>
+              <label htmlFor="tag" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Torrent Descriptions</label>
               <textarea name="descr" rows={6} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value={formInput?.descr} onChange={handleChange} placeholder="" >
               </textarea>
               <span className='text-red-400 text-[13px] '>{errors?.descr}</span>
@@ -484,9 +487,9 @@ useEffect(()=>{
               <div className="flex items-center h-5">
                 <input id="remember" type="checkbox" value="" className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"  />
               </div>
-              <label htmlFor="remember" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">I agree with the <a href="#" className="text-primary-600 hover:underline dark:text-primary-500">terms and conditions</a>.</label>
+              <label htmlFor="remember" className="ml-2 text-sm font-light text-gray-900 dark:text-gray-300">I agree with the <a href="#" className="text-primary-600 hover:underline dark:text-primary-500">terms and conditions</a>.</label>
             </div> */}
-            <button type="submit" className="bg-primary/10 text-primary border-primary my-3 hover:bg-primary/30 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700" style={{ border: "solid 0.5px" }} >Submit</button>
+            <button type="submit" className="bg-primary/10 text-primary border-primary my-3 hover:bg-primary/30 font-light rounded-lg text-sm w-full sm:w-auto px-5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700" style={{ border: "solid 0.5px" }} >Submit</button>
           </form>
 
         </div>

public/robots.txt

@@ -0,0 +1,8 @@
+User-agent: *
+Allow: /
+
+ 
+
+ 
+
+sitemap: https://yaps.cc/sitemap.xml

service/service.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-export const API_BASE = 'https://t-rb.org';
+export const API_BASE = 'https://therarbg.to';
 //const API_BASE = 'https://therarbg.com';
 let token;
 

tailwind.config.js

@@ -1,6 +1,7 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
+  darkMode: 'class',
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
@@ -15,11 +16,13 @@ module.exports = {
         circles: "url('/assets/images/background-cicles.png')",
       },
       colors: {
-        "background": "#0D0F0B",
-        "background-header": "#131313",
-        "primary": "#7AFFB8",
-        "seconday":"#fc4545",
-        "off-white": "#E5E7EB",
+        'light-white': '#f6f4e9',
+        'app-shady-white': '#e6e6e6',
+        background: '#0D0F0B',
+        'background-header': '#131313',
+        primary: '#2f6af5',
+        seconday: '#fc4545',
+        'off-white': '#E5E7EB',
         'app-pure-white': 'hsl(0, 0%, 100%)', // #FFFFFF
         'app-red': 'hsl(0, 97%, 63%)', // #FC4747
         'app-dark-blue': 'hsl(223, 30%, 9%)', // #10141E

utils/index.js

@@ -1,9 +1,8 @@
-import { v4 as uuidv4 } from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 export const TMDB_ENDPOINT = "https://api.themoviedb.org/3"
 export const TMDB_API_KEY = "d0e6107be30f2a3cb0a34ad2a90ceb6f"
-export const TMDB_IMAGE_ENDPOINT = 'https://image.tmdb.org/t/p/original'
-
+export const TMDB_IMAGE_ENDPOINT = 'https://image.tmdb.org/t/p/w500'
 
 
 export const pathToSearchAll = '/search/'
@@ -11,14 +10,13 @@ export const pathToSearchMovie = '/search/movie/'
 export const pathToSearchTV = '/search/tv/'
 
 
-export const fetcher = url => fetch(url).then(res =>{
-
-   return res.json()
-  })
+export const fetcher = url => fetch(url).then(res => {
+    return res.json()
+})
 
 
 export const shimmer = (w, h) => `
-<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="g">
       <stop stop-color="#333" offset="20%" />
@@ -33,30 +31,30 @@ export const shimmer = (w, h) => `
 `
 
 export const toBase64 = str =>
-  typeof window === 'undefined'
-    ? Buffer.from(str).toString('base64')
-    : window.btoa(str)
+    typeof window === 'undefined'
+        ? Buffer.from(str).toString('base64')
+        : window.btoa(str)
 
 export const renderResults = (array, Component, media_type) => {
-  return array.map(item => (
-    <Component
-      key={item.id || uuidv4()}
-      id={item.id}
-      category={item.media_type || media_type}
-      rating={item.adult}
-      src={
-        item.backdrop_path
-          ? `${TMDB_IMAGE_ENDPOINT}/${item.backdrop_path}`
-          : `${TMDB_IMAGE_ENDPOINT}/${item.poster_path}`
-      }
-      title={
-        item.title ? item.title : item.original_name || item.original_title
-      }
-      year={item.release_date || item.first_air_date}
-    />
-  ))
+    return array.map(item => (
+        <Component
+            key={item.id || uuidv4()}
+            id={item.id}
+            category={item.media_type || media_type}
+            rating={item.adult}
+            src={
+                item.backdrop_path
+                    ? `${TMDB_IMAGE_ENDPOINT}/${item.backdrop_path}`
+                    : `${TMDB_IMAGE_ENDPOINT}/${item.poster_path}`
+            }
+            title={
+                item.title ? item.title : item.original_name || item.original_title
+            }
+            year={item.release_date || item.first_air_date}
+        />
+    ))
 }
 
 export const sliceArray = (arr, limit) => {
-  return arr.slice(0, limit)
+    return arr.slice(0, limit)
 }