Consertando o problema de reprodução de áudio em iOS TWF-82 #1
Conversation
pedrolucasfv
requested review from
fmilani,
oliveiragabriel07 and
mthaissouza
and removed request for
mthaissouza
src/service/recordService.ts
Outdated
| export const fetchConvertAudio = async (blob: Blob) => { | ||
| const audioData = await blobToBase64(blob); | ||
|
|
||
| const apiUrl = "http://localhost:3001/features/send-wa-audio/convert-audio"; |
There was a problem hiding this comment.
Precisamos usar uma variável de ambiente aqui
src/hooks/UseRecorder.ts
Outdated
| if (chunks.length === 0) return; | ||
|
|
||
| const blob = new Blob(chunks, { type: "audio/wav" }); | ||
| const mp3Blob = await fetchConvertAudio(blob); |
There was a problem hiding this comment.
Faltou implementar tratamento de erros no fetchConvertAudio.
src/hooks/UseRecorder.ts
Outdated
|
|
||
| const triggerConvertAndSave = useCallback(() => { | ||
| if (convertAndSaveAudioRef.current) { | ||
| setIsLoading(true); |
There was a problem hiding this comment.
setIsLoading(true) poderia ser movido para dentro do método convertAndSaveAudioRef?
src/hooks/UseRecorder.ts
Outdated
| if (recorder && recorder.state === "inactive") { | ||
| recorder.start(); | ||
|
|
||
| recorder.ondataavailable = (e: MediaRecorderEvent) => { | ||
| recorder.ondataavailable = async (e: MediaRecorderEvent) => { |
There was a problem hiding this comment.
Pq temos esse async aqui?
src/hooks/UseRecorder.ts
Outdated
| setTimeout(() => { | ||
| convertAndSaveAudioRef.current && convertAndSaveAudioRef.current(); | ||
| }, 500); |
There was a problem hiding this comment.
Não entendi o objetivo dessa parte. A função é chamada na linha 30 e depois é chamada aqui novamente com um delay de 500ms? Pq isso é necessário?
src/hooks/UseRecorder.ts
Outdated
| cancelRecording: () => { | ||
| setRecorderState(initialState); | ||
| }, | ||
| saveRecording: () => triggerConvertAndSave(), |
There was a problem hiding this comment.
Aqui vc não poderia chamar diretamente convertAndSaveAudioRef.current() ?
Pq precisa dessa trigger com useCallback?
There was a problem hiding this comment.
O convertAndSaveAudioRef.current() funciona apenas para leitura. Já no caso do useCallback ele foi usado para garantir que, sempre que triggerConvertAndSave e outras funções fossem referenciadas ou chamadas, elas teriam a mesma referência entre re-renderizações, a menos que suas dependências mudassem. Isso ajuda a evitar re-renderizações desnecessárias.
| if: () => isFirefox | ||
| } | ||
| // { | ||
| // if: () => isFirefox |
There was a problem hiding this comment.
bora remover esse código comentado aqui
|
|
||
| export const ControlsContainer = styled('div')` | ||
| export const ControlsContainer = styled("div")` |
There was a problem hiding this comment.
parece q todas as aspas simples foram trocadas por duplas e ponto-e-virgulas adicionados no final das linhas.
sera q a config do prettier ta com problema?
There was a problem hiding this comment.
O commit do pigs também estava com aspas duplas, então aparetemente não está funcionando. Mas vamos subir um commit com alterações aqui.
src/hooks/UseRecorder.ts
Outdated
| setTimeout(() => { | ||
| convertAndSaveAudioRef.current && convertAndSaveAudioRef.current(); | ||
| }, 500); |
src/hooks/UseRecorder.ts
Outdated
| }) | ||
| typeof recordingInterval === "number" && clearInterval(recordingInterval); | ||
| }; | ||
| }); |
There was a problem hiding this comment.
pq a gente nao tem o array de dependencias aqui nesse useEffect? a gente quer mesmo executar ele em cada re-renderização?? nao faz sentido pra mim =/
There was a problem hiding this comment.
Ele é o cara que conta o tempo de áudio, como ele precisa contar os segundos, então faz sentido executar ele em cada rederização, não?
oliveiragabriel07
force-pushed
the
feature/convert-audio
branch
from
8909942
to
3c2e4df
Compare
Signed-off-by: Gabriel Oliveira <[email protected]>
oliveiragabriel07
force-pushed
the
feature/convert-audio
branch
from
3c2e4df
to
7c02c2a
Compare
O problema ocorria porque no iPhone não reproduzia o formato de áudio (.ogg) gravado através do MediaRecorder do navegador . Foi adicionado um backend que permite a conversão do tipo de áudio para ser aceito no iOS, porém, isso trouxe outros problemas como o tempo gasto quando o áudio é descartado (apertar o botão de cancelar), então foram feitas modificações para resolver esses problemas, por exemplo, adicionando um loading. Como já estava sendo feito alterações nesse trecho de código, aproveitamos para estilizar os botões e deixá-los mais atraentes para o usuário. Com todas essas alterações, agora o gravador funciona em todos os navegadores.