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
84
85
86
87
88
89
90
91
92
93
94
95
96
|
/**
* Detail view, displaying text plus media
*/
import React, { useRef, useEffect, useState, useCallback } from "react";
import Gallery from "./Gallery.js";
import Clocks from "./Clocks.js";
import Vimeo from "@u-wave/react-vimeo";
import { pad } from "../utils/index.js";
export default function Detail({ node, visible, onClose }) {
const ref = useRef();
const contentRef = useRef();
const [videoReady, setVideoReady] = useState(false);
useEffect(() => {
if (!node) {
setVideoReady(false);
}
setTimeout(() => {
ref.current.scrollTo(0, -ref.current.scrollHeight);
if (contentRef.current) {
contentRef.current.scrollTo(0, -ref.current.scrollHeight);
}
}, 10);
}, [node]);
const handleVideoReady = useCallback(() => {
if (node.data.object) {
setTimeout(() => {
setVideoReady(true);
}, 500);
} else {
setVideoReady(true);
}
}, [node]);
const handleLoad = useCallback(() => {
ref.current.scrollTo(0, -ref.current.scrollHeight);
});
if (!node) {
return <div className="detail" ref={ref} />;
}
const { id, data } = node;
const index = id + 1;
return (
<div className={visible ? "detail visible" : "detail"} ref={ref}>
<div className="content" ref={contentRef}>
<div>
<div className="title">
<div className="index">{pad(index)}</div>
{data.author && (
<div dangerouslySetInnerHTML={{ __html: data.author }} />
)}
<div dangerouslySetInnerHTML={{ __html: data.title }} />
</div>
<div
className="citation"
dangerouslySetInnerHTML={{ __html: data.citation }}
/>
<div
className="description"
dangerouslySetInnerHTML={{ __html: data.description }}
/>
</div>
</div>
<div className="media">
<div className="buttons close">
<img src="/assets/img/close.svg" onClick={onClose} />
</div>
{index === 33 ? (
<Clocks onLoad={handleLoad} />
) : data.type === "video" ? (
visible && (
<div className={videoReady ? "video ready" : "video"}>
<Vimeo
video={data.images[0].uri.replace("player.", "")}
autoplay
loop
showByline={false}
showPortrait={false}
showTitle={false}
onReady={handleVideoReady}
/>
</div>
)
) : (
<Gallery images={data.images} visible={visible} onLoad={handleLoad} />
)}
</div>
</div>
);
}
|
