98 lines
2.8 KiB
JavaScript
98 lines
2.8 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { Aside } from '@custom/shared/components/Aside';
|
|
import Button from '@custom/shared/components/Button';
|
|
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
|
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
|
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
|
import { useTranscription } from '../contexts/TranscriptionProvider';
|
|
|
|
export const TRANSCRIPTION_ASIDE = 'transcription';
|
|
|
|
export const TranscriptionAside = () => {
|
|
const { callObject } = useCallState();
|
|
const { showAside, setShowAside } = useUIState();
|
|
const { transcriptionHistory } = useTranscription();
|
|
const [isTranscribing, setIsTranscribing] = useState(false);
|
|
const { isOwner } = useParticipants();
|
|
|
|
const msgWindowRef = useRef();
|
|
|
|
|
|
useEffect(() => {
|
|
if (msgWindowRef.current) {
|
|
msgWindowRef.current.scrollTop = msgWindowRef.current.scrollHeight;
|
|
}
|
|
}, [transcriptionHistory?.length]);
|
|
|
|
if (!showAside || showAside !== TRANSCRIPTION_ASIDE) {
|
|
return null;
|
|
}
|
|
|
|
async function startTranscription() {
|
|
setIsTranscribing(true);
|
|
await callObject.startTranscription();
|
|
}
|
|
|
|
async function stopTranscription() {
|
|
setIsTranscribing(false);
|
|
await callObject.stopTranscription();
|
|
}
|
|
|
|
return (
|
|
<Aside onClose={() => setShowAside(false)}>
|
|
{isOwner && (
|
|
<div className="owner-actions">
|
|
|
|
<Button
|
|
fullWidth
|
|
size="tiny"
|
|
disabled={isTranscribing}
|
|
onClick={() =>
|
|
startTranscription()
|
|
}
|
|
>
|
|
{isTranscribing ? 'Transcribing' : 'Start transcribing'}
|
|
</Button>
|
|
<Button
|
|
fullWidth
|
|
size="tiny"
|
|
disabled={!isTranscribing}
|
|
onClick={() =>
|
|
stopTranscription()
|
|
}
|
|
>
|
|
Stop transcribing
|
|
</Button>
|
|
</div>
|
|
)}
|
|
<div className="messages-container" ref={msgWindowRef}>
|
|
{transcriptionHistory.map((msg) => (
|
|
<div key={msg.id}>
|
|
<span className="sender">{msg.sender}: </span>
|
|
<span className="content">{msg.message}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<style jsx>{`
|
|
.owner-actions {
|
|
display: flex;
|
|
font-weight: bold;
|
|
align-self: center;
|
|
gap: var(--spacing-xxxs);
|
|
margin: var(--spacing-xs) var(--spacing-xxs);
|
|
}
|
|
.messages-container {
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
margin-left: var(--spacing-xs);
|
|
}
|
|
.messages-container .sender {
|
|
font-weight: bold;
|
|
}
|
|
`}</style>
|
|
</Aside>
|
|
);
|
|
};
|
|
|
|
export default TranscriptionAside;
|