Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import styled from 'styled-components'

import Reel from './ReelItem'

import ReelPlayer from './ReelPlayer'

const ReelsContainer = styled.div`

  display: flex;

  gap: 0.5rem;

`

const ReelsList = () => {

  const [isShowReelPayer, setIsShowReelPayer] = useState(false)

  const [reel, setReel] = useState({})

  const reels = [

    {

      url: 'images/habitos.mp4'

    },

    {

      url: 'images/habitos.mp4'

    },

    {

      url: 'images/habitos.mp4'

    },

    {

      url: 'images/habitos.mp4'

    }

  ]

  const onReelEnd = (reel) => {

    const currentIndex = reels.indexOf(reel)

    const nextIndex = currentIndex + 1

    const nextReel = reels[nextIndex]

    setReel(nextReel)

  }

  const showReelPlayer = (currentReel) => {

    setIsShowReelPayer(true)

    setReel(currentReel)

  }

  const hideReelPlayer = () => {

    setIsShowReelPayer(false)

    setReel({})

  }

  return (

    <>

      <ReelsContainer>

        {reels.map((reel, index) => (

          <Reel

            preview={true}

            onSelect={showReelPlayer}

            reel={reel}

            key={index}

          />

        ))}

      </ReelsContainer>

      <ReelPlayer

        onReelEnd={onReelEnd}

        show={isShowReelPayer}

        onClose={hideReelPlayer}

        reel={reel}

      />

    </>

  )

}

export default ReelsList