Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-10 12:38:52 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎧 fix(TTS): Improve State of audio playback, hook patterns, and fix undefined MediaSource (#3632)

Browse source
This commit is contained in:
Danny Avila 2024-08-13 12:08:55 -04:00 • committed by GitHub
parent e3ebcfd2b1
commit dc8d30ad90
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 108 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

12
client/src/components/Chat/Input/StreamAudio.tsx
View file

@ -5,9 +5,9 @@ import { useQueryClient } from '@tanstack/react-query';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import type { TMessage } from 'librechat-data-provider';
import { useCustomAudioRef, MediaSourceAppender, usePauseGlobalAudio } from '~/hooks/Audio';
import { getLatestText, logger } from '~/utils';
import { useAuthContext } from '~/hooks';
import { globalAudioId } from '~/common';
import { getLatestText } from '~/utils';
import store from '~/store';
function timeoutPromise(ms: number, message?: string) {
@ -51,7 +51,7 @@ export default function StreamAudio({ index = 0 }) {
const latestText = getLatestText(latestMessage);
const shouldFetch = !!(
token &&
token != null &&
automaticPlayback &&
isSubmitting &&
latestMessage &&
@ -60,7 +60,7 @@ export default function StreamAudio({ index = 0 }) {
latestMessage.messageId &&
!latestMessage.messageId.includes('_') &&
!isFetching &&
activeRunId &&
activeRunId != null &&
activeRunId !== audioRunId
);
@ -109,7 +109,8 @@ export default function StreamAudio({ index = 0 }) {
const reader = response.body.getReader();
const type = 'audio/mpeg';
const browserSupportsType = MediaSource.isTypeSupported(type);
const browserSupportsType =
typeof MediaSource !== 'undefined' && MediaSource.isTypeSupported(type);
let mediaSource: MediaSourceAppender | undefined;
if (browserSupportsType) {
mediaSource = new MediaSourceAppender(type);
@ -210,6 +211,7 @@ export default function StreamAudio({ index = 0 }) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [paramId]);
logger.log('StreamAudio.tsx - globalAudioURL:', globalAudioURL);
return (
<audio
ref={audioRef}
@ -222,7 +224,7 @@ export default function StreamAudio({ index = 0 }) {
height: '0px',
width: '0px',
}}
src={globalAudioURL || undefined}
src={globalAudioURL ?? undefined}
id={globalAudioId}
muted
autoPlay