|
1 |
| -import { useRef, useCallback, useEffect } from 'react' |
2 |
| -import { useInView } from 'react-intersection-observer' |
3 |
| -import 'intersection-observer' |
| 1 | +import { useRef, useCallback, useEffect } from "react"; |
| 2 | +import { useInView } from "react-intersection-observer"; |
| 3 | +import "intersection-observer"; |
4 | 4 |
|
5 | 5 | export default ({ src, caption, ratio }) => {
|
6 | 6 | const [inViewRef, inView] = useInView({
|
7 | 7 | threshold: 1,
|
8 |
| - }) |
9 |
| - const videoRef = useRef() |
| 8 | + }); |
| 9 | + const videoRef = useRef(); |
10 | 10 |
|
11 | 11 | const setRefs = useCallback(
|
12 | 12 | (node) => {
|
13 | 13 | // Ref's from useRef needs to have the node assigned to `current`
|
14 |
| - videoRef.current = node |
| 14 | + videoRef.current = node; |
15 | 15 | // Callback refs, like the one from `useInView`, is a function that takes the node as an argument
|
16 |
| - inViewRef(node) |
| 16 | + inViewRef(node); |
17 | 17 |
|
18 | 18 | if (node) {
|
19 |
| - node.addEventListener('click', function () { |
| 19 | + node.addEventListener("click", function () { |
20 | 20 | if (this.paused) {
|
21 |
| - this.play() |
| 21 | + this.play(); |
22 | 22 | } else {
|
23 |
| - this.pause() |
| 23 | + this.pause(); |
24 | 24 | }
|
25 |
| - }) |
| 25 | + }); |
26 | 26 | }
|
27 | 27 | },
|
28 | 28 | [inViewRef]
|
29 |
| - ) |
| 29 | + ); |
30 | 30 |
|
31 | 31 | useEffect(() => {
|
32 | 32 | if (!videoRef || !videoRef.current) {
|
33 |
| - return |
| 33 | + return; |
34 | 34 | }
|
35 | 35 |
|
36 | 36 | if (inView) {
|
37 |
| - videoRef.current.play() |
| 37 | + videoRef.current.play(); |
38 | 38 | } else {
|
39 |
| - videoRef.current.pause() |
| 39 | + videoRef.current.pause(); |
40 | 40 | }
|
41 |
| - }, [inView]) |
| 41 | + }, [inView]); |
42 | 42 |
|
43 | 43 | return (
|
44 |
| - <div style={{ position: 'relative', margin: '2rem 1rem' }}> |
45 |
| - <div style={{ paddingBottom: ratio * 100 + '%' }}/> |
46 |
| - <video style={{ position: 'absolute', top: 0, left: 0 }} loop muted autoPlay playsInline ref={setRefs}> |
| 44 | + <div style={{ position: "relative", margin: "2rem 1rem" }}> |
| 45 | + <div style={{ paddingBottom: ratio * 100 + "%" }} /> |
| 46 | + <video |
| 47 | + style={{ position: "absolute", top: 0, left: 0 }} |
| 48 | + loop |
| 49 | + muted |
| 50 | + autoPlay |
| 51 | + playsInline |
| 52 | + ref={setRefs} |
| 53 | + > |
47 | 54 | <source src={src} type="video/mp4" />
|
48 | 55 | </video>
|
49 |
| - {caption && <figcaption style={{ fontSize: '.9rem', textAlign: 'center' }}>{caption}</figcaption>} |
| 56 | + {caption && ( |
| 57 | + <figcaption |
| 58 | + style={{ fontSize: ".9rem", textAlign: "center", marginTop: "1em" }} |
| 59 | + > |
| 60 | + {caption} |
| 61 | + </figcaption> |
| 62 | + )} |
50 | 63 | </div>
|
51 |
| - ) |
52 |
| -} |
| 64 | + ); |
| 65 | +}; |
0 commit comments