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