Update Transcript Search – Current Search Causes Lag and Freezing

Hello CXL.

are you running into the same issue on https://foliovision.com/player/demos/interactive-transcript ?

If not, then please post the URL to your page where we can see the issue.

Thanks,
Martin

Hello CXL,

I checked the issue and I can see that the text which you type into the transcript box is there, but it’s white, so it can’t be seen. So we will put up some CSS for the input text color.

I checked that performance issue as well – it appears that the search phrase highlight (using https://github.com/julmot/mark.js) gets into some issue with the MutationObserver added by the rocket-lazy-load plugin. Could you please disable that one and see if that help?

The autoscroll checkbox gets unchecked on purpose – when you are doing a search you surely don’t want the transcript box to follow the video playback position as you want to actually look at the matches.

Thanks,
Martin

Hello CXL,

please just load your page with the transcript in Chrome and play the video. Then start recording in the performance tab and type in some seach keyword for transcript. As you said it will take a while to execute. Then stop the recording and you should have a trace of the JavaScript code executed which will point you in the right direction.

I would like to solve the issue with LazyLoad by WP Rocket as we use that one some websites too.

Thanks,
Martin

Hello CXL,

when I use the transcript search on https://conversionxl.com/show/saying-no-for-growth/ I’m not noticing a huge lag in the highlight. I typed in “story” and then added “telling” to it and it was all running quickly.

I’m attaching a screenshot of the Performance tab, it shows the amount of processing required when I typed in “a” into the transcript search box. There were a lot of occurrences of that, so it might be the slowest highlight on there. And it was still done in 62 ms – that’s the c.fn.unmark part of it. You can see two (index):1320 calls too which took much longer – that’s the MutationObserver added by the rocket-lazy-load plugin.

It’s nowhere as slow as what’s on your screenshot: https://foliovision.com/images/2019/03/chrome_2019-03-05_15-15-22.png Please try again with your browser extensions disabled, perhaps an incognito window will help too.

However I’m not sure how we can do any highlight without modifying the HTML content of that textarea and thus not getting caught by that MutationObserver.

Perhaps the fix here is to require the search keyword to be at least 3 characters.

Going back to your screenshot – it doesn’t show any excessive processing for that MutationObserver added by the rocket-lazy-load plugin. I think you said you disabled that one for a test.

So I wonder what makes mark.js so slow on your computer.

Please try on https://foliovision.com/player/demos/interactive-transcript-chapters as well.

Thanks,
Martin

fv-player-pro-chapter-highlight-performance

Hello CLX,

as I said already – we can just require at least 2 or 3 characters to be entered before the hilight kicks in and that should help a lot already.

Thanks,
Martin

Hello CXL,

FV Player Pro Beta 7.3.13.727 is out and it improves the transcript search hilight speed a lot. The input was not properly debounced until now.

Thanks,
Martin