bbc / react-transcript-editor

A React component to make correcting automated transcriptions of audio and video easier and faster. By BBC News Labs. - Work in progress

Home Page:https://bbc.github.io/react-transcript-editor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scroll sync broken by visibility sensor

pietrop opened this issue · comments

Describe the bug

To Reproduce
Steps to reproduce the behavior:

  1. Go to demo app
  2. Click on Load demo
  3. Click on Settings ⚙️
  4. toggle Scroll Sync on
  5. Click on the progress bar, somewhere past 10 min.
  6. See error (app crashes)

Expected behavior

For scroll sync to work, without the app to crash

Additional context

Scroll sync uses scrollIntoView as follows

// get the word element - eg 
let el = document.querySelector("[data-start='339.86']")

// passing the `centre` value it should avoid jarring movement of the whole interface and 
// just move the text to the centre 
el.scrollIntoView({block: "center", inline: "center"})

But VisibilitySensor in the WrapperBlock removes the text from the page and so querySelector("[data-start='339.86']") doesn't return an element anymore.

VisibilitySensor in the WrapperBlock was originally introduced to address #150 but didn't do the trick of fixing that problem.

Solution
Remove VisibilitySensor in WrapperBlock. (in #175 branch)

addressed in #181 - merged in #175 branch/PR