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;