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

improved movie page

Browse source
This commit is contained in:
Rohithk 2023-09-26 17:42:05 +05:30
commit b5cd3f5c79
9 changed files with 343 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

39
Common/TorrentList.js
View file

@ -1,16 +1,16 @@
import moment from 'moment'
import { useRouter } from 'next/router'
import {useRouter} from 'next/router'
import React from 'react'
import Modal from 'react-modal'
import { formatBytes } from './CardExpanded'
import {formatBytes} from './CardExpanded'
import DataTable, { createTheme } from 'react-data-table-component'
import { useTheme } from 'next-themes'
import DataTable, {createTheme} from 'react-data-table-component'
import {useTheme} from 'next-themes'
const TorrentList = ({ setisTorrent, torrent_list, runtime }) => {
const { theme, settheme } = useTheme()
const TorrentList = ({setisTorrent, torrent_list, runtime}) => {
const theme = useTheme()
const router = useRouter()
const customStyles = {
@ -116,23 +116,26 @@ const TorrentList = ({ setisTorrent, torrent_list, runtime }) => {
},
},
{
name: 'S',
selector: row => row?.seeders,
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,
width: '5%',
sortFunction: (a, b) => {
return a?.leechers - b?.leechers
},
width: '8%',
style: {
color: '#00FF00',
},
},
{
name: 'L',
selector: row => row.leechers,
sortable: true,
width: '5%',
style: {
color: '#dd0c0e',
},
},
]
createTheme('dark', {
background: {

8
components/Collection.js
View file

@ -42,13 +42,7 @@ export default function Collection({
? 'h-scroll relative flex gap-x-4 overflow-x-scroll sm:gap-x-10 2xs:mt-2'
: 'card-collection-wrapper'
}>
{ isTrending &&
<div className={"absolute flex justify-center items-center w-20 top-0 right-0 z-[999] h-full shadow-lg backdrop-blur-lg"}>
<div className={"text-5xl"}>
>
</div>
</div>
}
{renderResults(
sliceArray(data.results || [], limit),
Component,

9
components/FilmHeading.js
View file

@ -1,5 +1,12 @@
export default function FilmHeading({ tagline, title }) {
export default function FilmHeading({ tagline, title ,from}) {
return (
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-gray-600 dark:text-app-placeholder sm:text-sm md:text-lg'>
{tagline}
</h2>
</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'>

2
components/Layout.js
View file

@ -7,7 +7,7 @@ export default function Layout({ children }) {
<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 />
<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'>
<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-[1200px] lg:grow'>
{children}
<Footer />
</main>

4
pages/api/movie/[id].js
View file

@ -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));

8
pages/f.js Normal file
View file

@ -0,0 +1,8 @@
export default function Fdd(){
return(
<>
<div>helllo</div>
</>
)
}

4
pages/movie/[id].js
View file

@ -129,7 +129,7 @@ export function renderRating(rating) {
}
}
function renderLength(runtime) {
export function renderLength(runtime) {
if (runtime !== 0 && runtime !== undefined) {
return runtime + ' min?.'
} else {
@ -145,7 +145,7 @@ export function renderLanguage(languages) {
}
}
function renderYear(year) {
export function renderYear(year) {
if (!year) {
return 'N/A'
} else {

111
pages/play/movies.js
View file

@ -1,20 +1,117 @@
import React from 'react'
import { useRouter } from 'next/router';
import React, {useState} from 'react'
import {useRouter} from 'next/router';
import Head from 'next/head'
import useSWR from "swr";
import FilmGenres from '../../components/FilmGenres'
import FilmHeading from '../../components/FilmHeading'
import FilmImage from '../../components/FilmImage'
import FilmInfo from '../../components/FilmInfo'
import FilmRating from '../../components/FilmRating'
import FilmSynopsis from '../../components/FilmSynopsis'
import {renderLanguage, renderLength, renderRating, renderStatus, renderYear} from "../movie/[id]";
import {AiOutlineExpand} from "react-icons/ai";
const servers_ = [
{
servername: "Vidsrc.me", link: "https://vidsrc.me/embed/movie?",
},
{
servername: "Vidsrc.to", link: "https://vidsrc.to/embed/movie/"
},
{
servername: "Moviesapi.club", link: "https://moviesapi.club/movie/"
}
]
const fetcher = (...args) => fetch(...args).then((res) => res.json())
const Movies = () => {
const router = useRouter()
const { id,tmdb} = router.query;
const {id, tmdb} = router.query;
const me = tmdb ? `tmdb=${tmdb}` : `imdb=${id}`
const to = tmdb ? `${tmdb}` : `${id}`
const [videoServer, setVideoServer] = useState('')
const {data, error} = useSWR(`/api/movie/${id}`, fetcher)
const [MovieDetailsHidden, setMovieDetailsHidden] = useState(false)
return (
<>
<Head>
<title>Play Movies | Yaps</title>
</Head>
<iframe src={`https://vidsrc.me/embed/movie?${tmdb?`tmdb=${tmdb}`:`imdb=${id}&color=5a6990`}`} frameBorder="0" style={{width: '100%' ,height: '92vh'}} allowfullscreen="allowfullscreen"></iframe>
<div
className={`${MovieDetailsHidden ? 'lg:grid-row-1 lg:grid-cols-2' : 'lg:grid-row-2 lg:grid-cols-1'} grid w-full h-full grid-cols-1 grid-rows-2`}>
<div className={` ${MovieDetailsHidden ? 'w-full' : 'min-w-2/3 '} flex flex-col h-full`}>
<iframe src={videoServer ? videoServer : servers_[0].link + me}
className={`w-full ${MovieDetailsHidden ? 'h-[60vh]' : 'h-[95vh]'}`}
allowFullScreen="allowfullscreen"></iframe>
<div className={"w-full p-4 pl-0 bg-transparent flex flex-row justify-start items-center"}>
<div onClick={() => setMovieDetailsHidden(!MovieDetailsHidden)}
className={"flex flex-row gap-1 items-center hover:text-orange-500 transition duration-300 ease-in-out hover:cursor-pointer"}>
<AiOutlineExpand/>
<span>Expand</span>
</div>
</div>
<div className={" w-full flex justify-start items-center h-36"}>
<div className={"rounded w-full h-full flex flex-row "}>
<div
className={"p-2 h-full bg-app-shady-white dark:bg-app-grey dark:text-black text-center w-1/3"}>
{`You are watching `}
<div className={" font-bold"}>{data ? data.imdb.imdb.name : ""}</div>
<div> If current server doesn't work please try other servers beside.</div>
</div>
<div className={" bg-app-pure-white text-black w-2/3 h-full"}>
<div className={"w-full flex flex-row gap-7 p-5 justify-start items-center h-10"}>
{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={"dark:bg-app-semi-dark-blue dark:text-white hover:scale-110 hover:cursor-pointer transition duration-300 ease-in-out bg-app-shady-white rounded p-3 w-[8em] text-center h-8"}
key={index}>
{server.servername}
</div>
)
})}
</div>
</div>
</div>
</div>
</div>
<div className={` ${MovieDetailsHidden ? '' : 'hidden'} min-w-1/3 h-full`}>
<section
className='flex flex-row ml-10 lg:mt-0 mt-10 lg:flex-col lg:justify-end justify-center items-center lg:items-baseline'>
<FilmImage
src={data?.detail?.poster_path}
title={data?.detail?.title}
/>
<section>
<FilmHeading
from={'movie'}
tagline={data?.detail?.tagline}
title={data?.detail?.title}
/>
<FilmRating number={renderRating(data?.detail?.vote_average)}/>
<FilmSynopsis synopsis={data?.detail?.overview}/>
<FilmInfo
media_type={data?.imdb.imdb.content_type.toLowerCase()}
language={renderLanguage(data?.detail?.spoken_languages || [])}
length={renderLength(data?.detail?.runtime)}
status={renderStatus(data?.detail?.status)}
year={renderYear(data?.detail?.release_date)}
/>
<FilmGenres genres={data?.detail?.genres || []}/>
</section>
</section>
</div>
</div>
</>
)
}
export default Movies
export default Movies;

10
utils/index.js
View file

@ -1,24 +1,23 @@
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 pathToSearchAll = '/search/'
export const pathToSearchMovie = '/search/movie/'
export const pathToSearchTV = '/search/tv/'
export const fetcher = url => fetch(url).then(res =>{
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%" />
@ -38,6 +37,7 @@ export const toBase64 = str =>
: window.btoa(str)
export const renderResults = (array, Component, media_type) => {
console.log(array)
return array.map(item => (
<Component
key={item.id || uuidv4()}