Carsonthemonkey / GIST

App to summarize audio files for the LC ACM spring 2023 hackathon
MIT License
3 stars 0 forks source link

Inputting an API key while audio is playing breaks the audio panel #78

Closed Carsonthemonkey closed 1 year ago

Carsonthemonkey commented 1 year ago

It will restart the audio and the playhead will go wild. This is quite strange given that the audio panel doesn't interact with the API key at all, but I think it might have to do with the useEffect hook? In theory it should only be called when the audio file is updated, not the API key, but that is the only thing I can think of since the Audio Panel is inside of the Transcript Panel which does interact with the API key.

Carsonthemonkey commented 1 year ago

It is indeed useEffect causing the issue.

Carsonthemonkey commented 1 year ago

The issue was that the transcript panel was responsible for generating the audio URL string from the audio file to be passed to the audio panel. Each time the transcript panel would re-mount due to changes in the API key, it would generate a different URL (even though it was referencing the same file). Having the transcript panel pass the audio as a file to the audio panel and then having the audio panel be the one to generate the URL fixes the issue. Although this does make me wonder if it is really necessary for the API key to be re-rendering the transcript panel every time it is updated. Might be better to make it useRef? Something to look into.