Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1650 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1650 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react';
2 
import styled from 'styled-components'
 2 
import styled from 'styled-components';
3 
import Reel from './ReelItem'
 3 
import Reel from './ReelItem';
4 
import ReelPlayer from './ReelPlayer'
 4 
import ReelPlayer from './ReelPlayer';
5 
 
 5 
 
6 
const ReelsContainer = styled.div`
 6 
const ReelsContainer = styled.div`
7 
  display: flex;
 7 
  display: flex;
8 
  gap: 0.5rem;
 8 
  gap: 0.5rem;
9 
`
 9 
`;
10 
 
 10 
 
11 
const ReelsList = () => {
 11 
const ReelsList = () => {
12 
  const [isShowReelPayer, setIsShowReelPayer] = useState(false)
 12 
  const [isShowReelPayer, setIsShowReelPayer] = useState(false);
13 
  const [reel, setReel] = useState({})
 13 
  const [reel, setReel] = useState({});
14 
  const reels = [
 14 
  const reels = [
15 
    {
 15 
    {
16 
      url: 'images/habitos.mp4'
 16 
      url: 'images/habitos.mp4'
17 
    },
 17 
    },
18 
    {
 18 
    {
19 
      url: 'images/habitos.mp4'
 19 
      url: 'images/habitos.mp4'
20 
    },
 20 
    },
21 
    {
 21 
    {
22 
      url: 'images/habitos.mp4'
 22 
      url: 'images/habitos.mp4'
23 
    },
 23 
    },
24 
    {
 24 
    {
25 
      url: 'images/habitos.mp4'
 25 
      url: 'images/habitos.mp4'
26 
    }
 26 
    }
27 
  ]
 27 
  ];
28 
 
 28 
 
29 
  const onReelEnd = (reel) => {
 29 
  const onReelEnd = (reel) => {
30 
    const currentIndex = reels.indexOf(reel)
 30 
    const currentIndex = reels.indexOf(reel);
31 
    const nextIndex = currentIndex + 1
 31 
    const nextIndex = currentIndex + 1;
32 
    const nextReel = reels[nextIndex]
 32 
    const nextReel = reels[nextIndex];
33 
    setReel(nextReel)
 33 
    setReel(nextReel);
34 
  }
 34 
  };
35 
 
 35 
 
36 
  const showReelPlayer = (currentReel) => {
 36 
  const showReelPlayer = (currentReel) => {
37 
    setIsShowReelPayer(true)
 37 
    setIsShowReelPayer(true);
38 
    setReel(currentReel)
 38 
    setReel(currentReel);
39 
  }
 39 
  };
40 
 
 40 
 
41 
  const hideReelPlayer = () => {
 41 
  const hideReelPlayer = () => {
42 
    setIsShowReelPayer(false)
 42 
    setIsShowReelPayer(false);
43 
    setReel({})
 43 
    setReel({});
44 
  }
 44 
  };
45 
 
 45 
 
46 
  return (
 46 
  return (
47 
    <>
 47 
    <>
48 
      <ReelsContainer>
 48 
      <ReelsContainer>
49 
        {reels.map((reel, index) => (
 49 
        {reels.map((reel, index) => (
50 
          <Reel
 - 
 
51 
            preview={true}
 - 
 
52 
            onSelect={showReelPlayer}
 50 
          <Reel preview={true} onSelect={showReelPlayer} reel={reel} key={index} />
53 
            reel={reel}
 - 
 
54 
            key={index}
 - 
 
55 
          />
 - 
 
56 
        ))}
 51 
        ))}
57 
      </ReelsContainer>
 52 
      </ReelsContainer>
58 
      <ReelPlayer
 53 
      <ReelPlayer
59 
        onReelEnd={onReelEnd}
 54 
        onReelEnd={onReelEnd}
60 
        show={isShowReelPayer}
 55 
        show={isShowReelPayer}
61 
        onClose={hideReelPlayer}
 56 
        onClose={hideReelPlayer}
62 
        reel={reel}
 57 
        reel={reel}
63 
      />
 58 
      />
64 
    </>
 59 
    </>
65 
  )
 60 
  );
66 
}
 61 
};
67 
 
 62 
 
68 
export default ReelsList
 63 
export default ReelsList;