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
|
import React from "react";
import { ChatMessage } from "../database.d";
import ChatMessageRender from "./ChatMessageRender";
export type ChatReplayProps = {
replayData: ChatMessage[];
currentTimeSeconds: number;
};
function bsearch<T>(
arr: T[],
search: number,
transform: (item: T) => number
): number {
let iL = 0,
iR = arr.length - 1,
iM = Math.floor(arr.length / 2);
while (iR - iL > 1) {
iM = Math.floor((iL + iR) / 2);
const m = transform(arr[iM]);
if (m < search) iL = iM;
else if (m > search) iR = iM;
else if (m === search || iL === iM) return iM;
}
return iM;
}
const ChatReplay = (props: ChatReplayProps) => {
const { replayData, currentTimeSeconds } = props;
const [messages, setMessages] = React.useState<ChatMessage[]>([])
React.useEffect(() => {
if (!replayData) return;
/**
* Find the current replayData index where
* time_in_seconds <= currentTimeSeconds
* using binary search
*/
const index = bsearch(
replayData,
currentTimeSeconds,
(message) => message.time_in_seconds
);
/**
* Once index is acquired, slice the array
* to get the previous `maxMessages` items
*/
const maxMessages = 50;
const messages = replayData.slice(Math.max(0, index - maxMessages), index);
// Make sure there are no duplicate messages
const filtered = [];
const messageIds = [];
for (const message of messages) {
if (messageIds.includes(message.message_id)) continue;
messageIds.push(message.message_id);
filtered.push(message);
}
setMessages(filtered);
}, [replayData, currentTimeSeconds]);
return (
<div className="w-full break-words">
{messages.map((msg) => (
<ChatMessageRender key={msg.message_id} message={msg} />
))}
</div>
);
};
export default ChatReplay;
|
