improved movie page
This commit is contained in:
Rohithk
parent
5ff1c85072
commit
b5cd3f5c79
9 changed files with 343 additions and 238 deletions
|
|
@ -1,184 +1,187 @@
|
|||
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 router = useRouter()
|
||||
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 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 qualityRegex = /(4K|720p|1080p|2160p|720P|360P|360p|1080P)/i
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'Name',
|
||||
selector: row => row.name,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'Action',
|
||||
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, '')
|
||||
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 (
|
||||
<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',
|
||||
selector: row => row?.seeders,
|
||||
sortable: true,
|
||||
width: '5%',
|
||||
style: {
|
||||
color: '#00FF00',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'L',
|
||||
selector: row => row.leechers,
|
||||
sortable: true,
|
||||
width: '5%',
|
||||
style: {
|
||||
color: '#dd0c0e',
|
||||
},
|
||||
},
|
||||
]
|
||||
createTheme('dark', {
|
||||
background: {
|
||||
default: 'transparent',
|
||||
},
|
||||
})
|
||||
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',
|
||||
},
|
||||
},
|
||||
|
||||
const customCss = {
|
||||
headCells: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '700',
|
||||
color: theme === 'dark' ? '#C2D8D3' : '#000000',
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
createTheme('dark', {
|
||||
background: {
|
||||
default: 'transparent',
|
||||
},
|
||||
})
|
||||
|
||||
console.log('torrent_list', torrent_list)
|
||||
const customCss = {
|
||||
headCells: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '700',
|
||||
color: theme === 'dark' ? '#C2D8D3' : '#000000',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
createTheme('dark', {
|
||||
background: {
|
||||
default: 'transparent',
|
||||
},
|
||||
})
|
||||
console.log('torrent_list', torrent_list)
|
||||
|
||||
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>
|
||||
)}
|
||||
{/* {
|
||||
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?
|
||||
|
||||
|
|
@ -282,9 +285,9 @@ const TorrentList = ({ setisTorrent, torrent_list, runtime }) => {
|
|||
</h1>
|
||||
|
||||
</div> } */}
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default TorrentList
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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-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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
8
pages/f.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export default function Fdd(){
|
||||
return(
|
||||
<>
|
||||
<div>helllo</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
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>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
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)
|
||||
|
||||
export default Movies
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Play Movies | Yaps</title>
|
||||
</Head>
|
||||
<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;
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
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 +32,31 @@ 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}
|
||||
/>
|
||||
))
|
||||
console.log(array)
|
||||
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)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue