/
Video.jsx
53 lines (48 loc) · 1.56 KB
/
Video.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React from 'react';
import PropTypes from "prop-types";
/**
* @param { FsLightbox.data.urls } urls
* @param { FsLightbox.elements.sources } sources
* @param { FsLightbox.sourcesData.isSourceAlreadyInitializedArray } isSourceAlreadyInitializedArray
* @param { FsLightbox.sourcesData.videosPosters } videosPosters
* @param { FsLightbox.core.sourceController | SetUpSourceController } sourceController
* @param { number }index
*/
const Video = (
{
fsLightbox: {
data: { urls },
elements: { sources },
sourcesData: { videosPosters, isSourceAlreadyInitializedArray },
core: { sourceController }
},
index
}
) => {
const onLoadedMetaData = ({ target }) => {
sourceController.setIndex(index);
(isSourceAlreadyInitializedArray[index]) ?
sourceController.normalLoad() :
initialLoad(target);
};
const initialLoad = (target) => {
sourceController.setSourceWidth(target.videoWidth);
sourceController.setSourceHeight(target.videoHeight);
sourceController.initialLoad();
};
return (
<video
onLoadedMetadata={ onLoadedMetaData }
className="fslightbox-source fslightbox-video fslightbox-opacity-0"
controls
ref={ sources[index] }
poster={ videosPosters[index] }>
<source src={ urls[index] }/>
</video>
);
};
Video.propTypes = {
fsLightbox: PropTypes.object.isRequired,
index: PropTypes.number.isRequired
};
export default Video;