Interactive Transcript Using Repeating Group with Thousands of Items - Is there a more efficient approach

Hey friends,

I have a video tool I’m creating for a client that has an interactive transcript component. It highlights where you are in the video, and allows you to change where you are by clicking.

Right now, the way I create the transcript is to parse the subtitle file into thousands of things called “Transcript Fragments” which have fields for start time, end time, and text. Then I put them all in a single repeating group, and set conditionals to highlight based on the time of the video. I also have it scroll to the correct section every time the video time changes.

The problem is that with some of the videos having over 9000 fragments, the original loading, and reloading when scrolling to the bottom can be quite unperformant. I could probably get it down a few thousand by combining fragments together in longer fragments, but I still think the repeating groups are just really unperformant for this use case. Is there another, better way to do something like this?

Still trying to figure out a way to make this more efficient! Is there a way for instance into unload and reload the content based on scrolling, or some other way to do this that’s not a repeating group?

Can the parse be done on the page, so just retrieve the subtitle?

Or store the parsed transcript as a single text, and split it into pieces on the page with text operations or javascript?

A HTML element will let you define your own <table> or list of elements, then the JS scroll-to works much faster than a RG scroll-to.

I’d first try the RG with the better data loading, it may be good enough.