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;