blob: 2c94e21cd4d2d1a49690734b018f09e71a3714fd (
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
/**
* Intro
*/
import React, { useState, useCallback } from "react";
import Vimeo from "@u-wave/react-vimeo";
let playing = false;
const audio = document.createElement("audio");
audio.loop = true;
audio.volume = 0.25;
audio.src = "assets/data_store/X4LM-10m-192k.mp3";
export default function Intro({ onComplete }) {
const [done, setDone] = useState(false);
const [started, setStarted] = useState(false);
const [player, setPlayer] = useState(false);
const [videoSize] = useState(coverWindow());
const handleClose = useCallback(() => {
audio.play();
setDone(true);
setTimeout(() => {
onComplete();
}, 200);
}, []);
const handleStart = useCallback(() => {
playing = true;
setStarted(true);
if (player) {
player.play();
}
}, [player]);
const handleReady = useCallback((player) => {
setPlayer(player);
if (playing) {
player.play();
setStarted(true);
}
});
return (
<div className={done ? "intro done" : "intro"}>
<Vimeo
video="https://vimeo.com/612279630"
className="intro-video"
showByline={false}
showPortrait={false}
showTitle={false}
style={videoSize}
muted={false}
volume={1}
onReady={handleReady}
onEnd={handleClose}
/>
<div
style={{ backgroundImage: "url(assets/img/no6092start.jpg)" }}
className={started ? "intro-image playing" : "intro-image"}
onClick={handleStart}
/>
{started && (
<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" };
}
};
|
