Structured navigation component should auto-scroll so that active section is visible to users

[elynema]

Description

Since the structured navigation component is now a scrollable element, it seems desirable for it to auto-scroll so that the currently active / playing section is visible in the viewport (aka, viewable to users). Since users can't see the structured navigation component if they are scrolled to the top of the screen, this means that if they scroll down to see the structured navigation component, they should see the currently playing section highlighted without having to scroll within the component itself.

The component should advance automatically as sections advance via auto-play.

Done Looks Like

• When the currently playing section is changed, the section label is scrolled into view within the structured navigation div

[joncameron]

When auto-scroll happens there's a re-render and this could possibly cause jerky behavior as was seen before, but we might be able to avoid these.

[joncameron]

This is working well for segments/structure, but not for sections. Clicking a section below the fold will reset the structurednav area to the top, leaving the active section hidden. This is also the case for autoplay:

Should we make a new issue for section switching?

[elynema]

@joncameron Let's see what Dananji says, but I think that section switching is a core part of this and we should just bring this issue back to in progress to keep the work together in one place.

[elynema]

@Dananji Pulling this back to In Progress as the auto-scroll is not working when a section is selected.

[elynema]

Implementation pulls the selected section to the very middle of the structured navigation display. I believe that resolves the requirements of this issue, although it is still a bit confusing as after clicking on a section, the user is pulled back up to the top of the page to show the player and so the selected section moves below the fold (depending on the size of your screen). Verified that structured nav component is auto-scrolling as the item auto-plays as well.

[Dananji]

If we implement auto-scrolling the page to show the structured navigation into view, it might cause the page to scroll causing the jerky behavior we were seeing before.
And it could interrupt the user when active structure item gets updated during playback, since it would scroll the structure into view taking the player out of view (depending on the device size).