Создадим клон Youtube с помощью Nextjs и Tailwindcss 🎉 (часть 3)

В предыдущих двух разделах мы создали статические разделы клона YouTube. В этом разделе мы будем получать данные для содержимого веб-страницы. Для этого создадим следующий serverSideProp в файле index.js:

export async function getServerSideProps(context){
  const query = context.query.query;
  const header = {
        'X-RapidAPI-Key': process.env.NEXT_APP_API_KEY,
        'X-RapidAPI-Host': RapidAPI-Host
      }
{/* If the user submitted something from the input field, then fetch for that keyword else fetch for trending videos */}
  if (query){
    const options = {
      method: 'GET',
      url: 'https://youtube-search-and-download.p.rapidapi.com/search',
      params: {
        query: query,
        hl: 'en',
        type: 'v'
      },
      headers:header
      };
      const response = await axios.request(options);

      return {
        props: {
          data: response.data.contents
        }
      }
  }else{
    const options = {
    method: 'GET',
    url: 'https://youtube-search-and-download.p.rapidapi.com/trending',
    params: { hl: 'en'},
    headers:header
    };
    const response = await axios.request(options);

    return {
      props: {
        data: response.data.contents
      }
    }

  }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь, чтобы получить доступ к данным, все, что вам нужно сделать, это:

export default function Home({data}){
}

Войти в полноэкранный режим Выйти из полноэкранного режима

и Передать данные компоненту body:

<Body data={data} />

Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы правильно помните, наш файл Body.js выглядел примерно так:

function Body({data}) {
  return (
    <div className="col-span-6 relative min-h-screen z-0 ml-4 lg:ml-20">
        <VideoPlayer data={data} />      
    </div>
  )
}

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, компонент VideoPlayer.js является важной частью:
Сначала мы импортируем все необходимые зависимости, а именно:

import {BsDot, BsThreeDots} from 'react-icons/bs'
import ReactPlayer from 'react-player/lazy'
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'

Вход в полноэкранный режим Выйти из полноэкранного режима

Затем мы создаем компонент с данными, которые мы получили из запроса:


function VideoPlayer({data}) {
// Set loading feature
  const [loading, setloading] = useState(false)
  useEffect(() =>{
    setTimeout(() => {
      setloading(true)
    }, 2000)
  }, [])

  return (
    <div className='flex flex-wrap gap-5 items-center justify-center my-10'>
      {data && data.map((item, index) => {
        return (      
          <div className='flex flex-col items-center ml-10 md:ml-0' key={index}>

          <div className='relative '>
            {loading ? (
              <>
                <ReactPlayer url={`https://www.youtube.com/watch?v=${item? item.video.videoId: 'Ux_LFXpOrd4'}`} light  height={220} width={380}/>
                <span className='absolute bottom-2 right-3 bg-black text-white p-0.5'>{item.video.lengthText}</span>  
              </>
            ) : <Skeleton height={220} width={380} />} 
          </div>

          <div className='flex mt-4 ml-1'>
{/* Note that for better image rendering, you can use the Image component from next/image */}
            <img src='/youtube.jpg' alt='channel-logo' className='rounded-full mr-3 w-10 h-10 object-cover'/>

            <div>
              <div className='flex justify-between w-80 mb-1'>
                <div><h2 className='text-xl font-bold'>{item? item.video.title.length > 45? `${item.video.title.slice(0,45)}...`:item.video.title:<Skeleton />}</h2></div>
                <div className='rounded-full h-10 w-10 text-center flex items-center justify-center transition-all hover:bg-gray-100'><BsThreeDots size={20} className='rotate-90'/></div>
              </div>
              <div className='opacity-60 font-semibold'>
                {loading? item.video.channelName: <Skeleton />}
              </div>
              <div className='flex opacity-60 font-semibold'>
                <p className='flex items-center justify-center text-center'>{loading ? item.video.viewCountText : <Skeleton />} {' '} {loading? <BsDot />: <Skeleton />}</p>
                <p>{loading? item.video.publishedTimeText: <Skeleton />}</p>
              </div>
            </div>
          </div>
        </div>
        )
      })}

    </div>
  )
}

Войти в полноэкранный режим Выход из полноэкранного режима

Но чтобы создать возможность поиска, мы должны изменить наш файл header.js на что-то вроде этого:
Чтобы управлять вводом состояния, объявите состояние

const [InputValue, setInputValue] = useState('');

Вход в полноэкранный режим Выйти из полноэкранного режима

И на нашем поле ввода:

<input type='text' placeholder='Search'
    value={InputValue}
    onChange={(e) =>{
    setInputValue(e.target.value)
}}
onKeyDown={(e) =>{
    if (e.key === 'Enter'){
    router.push(`/?query=${InputValue.toLowerCase()}`);
}}}

Enter fullscreen mode Выйти из полноэкранного режима

Вот и все! Мы создали клон YouTube. Счастливого кодинга!