Read the captions from file

[SherryH]

https://stackoverflow.com/questions/32662080/how-can-i-use-javascript-to-read-a-vtt-file-into-array-and-loop

So, for our local file, we can also fetch/ get like it is in the cloud. The URL is just a path anyway.

Instead of using axios. We can just use fetch.

Ken created a fetch wrapper to make it easier to use. API looks like: // read -> function client(endpoint, {body,...customConfig} = {}) // then we transform customConfig into config that window.fetch accepts

// then we use the nextjs api file folder to load the filetype a http

=========

5. 1. How to load the vtt file? My linter is complaining. It does not complain about loading the json file but not vtt. I thought I need to configure the file loader on webpack. On the NextJS config file I couldnt find the relevant info there. I copied the stackoverflow configs here and here2. Can you spot anything there about how to load file??

=> Jemi suggested to look at how this issue was resolved in the CSS Modules use case.

[SherryH]

• created a small client as a fetch wrapper.
• I will try load the file from the fetch wrapper and console the content as the next step

[SherryH]

after loading the subtitles, we can try display it as captions for the video. OR, in the case of EASY German where there is prebuilt subtitles, we can stop it from loading.

1. show it as captions with the video
2. show the translations too.