-
Notifications
You must be signed in to change notification settings - Fork 1
/
Output.jsx
78 lines (69 loc) · 2.82 KB
/
Output.jsx
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
import React, { useState, useEffect } from "react";
import TextOutput from "./TextOutput";
import AudioOutput from "./AudioOutput";
import ConversationControls from "./ConversationControls";
function Output({ conversation, audioBuffers }) {
const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
const [currentSnippetIndex, setCurrentSnippetIndex] = useState(0);
const [currentMessageTextSnippet, setCurrentMessageTextSnippet] =
useState("");
const [isPaused, setIsPaused] = useState(false);
useEffect(() => {
console.log("Audio buffers length:", audioBuffers.length);
console.log("Current audio buffer index:", currentMessageIndex);
}, [audioBuffers, currentMessageIndex]);
useEffect(() => {
if (conversation.length > 0 && !isPaused) {
const snippets =
conversation[currentMessageIndex].text.split(/(?<=\.\s)/);
if (snippets.length > currentSnippetIndex) {
setCurrentMessageTextSnippet(snippets[currentSnippetIndex]);
const timeout = setTimeout(() => {
if (currentSnippetIndex < snippets.length - 1) {
setCurrentSnippetIndex(currentSnippetIndex + 1);
} else if (currentMessageIndex < conversation.length - 1) {
setCurrentMessageIndex(currentMessageIndex + 1);
setCurrentSnippetIndex(0);
}
}, calculateDisplayTime(snippets[currentSnippetIndex]) * 1000);
return () => clearTimeout(timeout); // Cleanup timeout on unmount or dependency change
}
}
}, [currentMessageIndex, currentSnippetIndex, conversation, isPaused]); // Include isPaused in dependencies
const calculateDisplayTime = (text) => Math.max(3, text.length * 0.05);
function handlePauseResume() {
setIsPaused(!isPaused); // Toggle pause state
}
function handleSkipForward() {
if (conversation.length > currentMessageIndex) {
const snippets =
conversation[currentMessageIndex].text.split(/(?<=\.\s)/);
if (currentSnippetIndex < snippets.length - 1) {
// Move to the next snippet within the same message
setCurrentSnippetIndex(currentSnippetIndex + 1);
} else if (currentMessageIndex < conversation.length - 1) {
// Move to the first snippet of the next message
setCurrentMessageIndex(currentMessageIndex + 1);
setCurrentSnippetIndex(0);
}
}
}
return (
<div>
<h2>
Speaker:{" "}
{conversation.length > 0
? conversation[currentMessageIndex].speaker
: ""}
</h2>
<TextOutput currentMessageTextSnippet={currentMessageTextSnippet} />
<AudioOutput currentAudioBuffer={audioBuffers[currentMessageIndex]} />
<ConversationControls
isPaused={isPaused}
onPauseResume={handlePauseResume}
onSkipForward={handleSkipForward}
/>
</div>
);
}
export default Output;