blob: d27d34bac6a6132e8996663a1bf14d8993880cc6 (
plain)
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
/**
* Intro
*/
import React, { useState, useCallback } from "react";
import Vimeo from "@u-wave/react-vimeo";
export default function Intro({ onComplete }) {
const [done, setDone] = useState(false);
const [playing, setPlaying] = useState(false);
const [player, setPlayer] = useState(false);
const [videoSize] = useState(coverWindow());
const handleClose = useCallback(() => {
setDone(true);
setTimeout(() => {
onComplete();
}, 200);
}, []);
const handleReady = useCallback((player) => {
setPlayer(player);
if (playing) {
player.play();
}
}, []);
return (
<div className={done ? "intro done" : "intro"}>
<Vimeo
video="https://vimeo.com/612279630"
className="intro-video"
showByline={false}
showPortrait={false}
showTitle={false}
style={videoSize}
onReady={handleReady}
onEnd={handleClose}
/>
<div
style={{ backgroundImage: "url(assets/img/no6092start.jpg)" }}
className={playing ? "intro-image playing" : "intro-image"}
onClick={() => {
setPlaying(true);
player && player.play();
}}
/>
{playing && (
<img
className="close"
src="/assets/img/close.svg"
onClick={handleClose}
/>
)}
</div>
);
}
const coverWindow = () => {
const videoRatio = 1.777;
const screenRatio = window.innerWidth / window.innerHeight;
if (screenRatio > videoRatio) {
return { width: "100vw", height: 100 * 1.777 + "vh" };
} else {
return { width: "177vh", height: "100vh" };
}
};
|
