Don't Scroll Page on Transcript Component Cue Advance

[joncameron]

Description

The Transcript component will scroll the page to fit as much of the component into view as possible on each cue change when set to auto-advance.

Example

When Transcript Component is Partially in View

Currently users can be in a situation where the viewport has the video player and most of the transcript component, but when a cue advances the page is automatically scrolled and creates a jarring effect. It also forces a long scroll away from the media player when cues change and the viewport is narrow enough that the transcript component is at the bottom of the page elements.

Done Looks Like

• Transcript component does not scroll the page when advancing to the next cue (only content within the component scrolls)

[elynema]

@joncameron I'm pretty sure this is by design. You need to turn off the auto-scroll first.

[cjcolvar]

I think the auto-scroll makes sense for the Avalon layout of ramp components, but the example above on the demo site uses a different layout of components which makes it jarring to have auto-scroll. I think auto-scroll is enabled by default so maybe a solution would be to have a prop for the Transcript component which sets the default (true for Avalon and false for demo site). The state of auto-scroll could also be saved in local storage for user preference.

[joncameron]

I'll refine this issue since I feel this behavior should change. Auto-scroll should be scrolling the transcript component, not scrolling the page itself to move the transcript component into view (or at least not by default).

Currently you can be in a situation where the viewport has the video player and most of the transcript component, but when a cue advances the page is automatically scrolled and creates a jarring effect. It also forces a long scroll away from the media player when cues change and the viewport is narrow enough that the transcript component is at the bottom of the page elements.

This doesn't appear to apply or be functioning in this way on avalon-dev as Chris mentioned.

[elynema]

This is particularly prominent on mobile devices, where you can't watch the video is the transcript is auto-scrolling. Need to QA this with a new Ramp build in Avalon on a mobile device.

[elynema]

@charumitraravi Can you QA this one on avalon-dev? This is particularly obvious on mobile devices, where you usually can't see the media player if you are looking at the transcript. If you start playback with the Transcript component selected, you should be able to scroll up to view the media item without the screen auto-scrolling back down to the transcript component as the transcript auto-advances.

[charumitraravi]

QA completed. Checked on mobile devices, as well as web browser with different view ports. The fix is working as expected.

[elynema]

Double-checked on Android, working great, closing.