Transcript component can get stuck before auto-scrolls and forces page to jump

[elynema]

Description

There are 2 issues I noted with the transcript component in the attached video. First, sometimes as the text moves on, the current text will move out of view in the transcript component (it progress beyond the text visible in the component). Usually it takes a few seconds, and then the transcript will jump back up so the current text is in the middle of the component again.

In addition, if I scroll the entire media object page up or down, it jumps back to having the media player and transcript component centered every time the transcript advances to the next line. That seems like a bug to me, as the user should be able to scroll without having the page jump.

Item for testing: https://avalon-dev.dlib.indiana.edu/media_objects/gf06g267d

Private Zenhub Video

Done Looks Like

• Transcript component not centered on the page when advancing to the next line during playback
• Scroll the active transcript text into view immediately during playback when user is not interacting with the Transcript component

[joncameron]

Breaking out new ticket for double scrollbar. Once that is resolved, does it impact this?

Are others able to replicate this issue?

[elynema]

This was not resolved by #5483

[elynema]

This looks fine in Chrome and Firefox on my laptop; I also checked Firefox on Android and that worked (hard to check Chrome on Android as there's no audio).

The movement of the transcript still lagged beyond video playback in Safari on my laptop, and eventually playback just halted with player locking up. Interestingly, the exact same thing happened with Chrome on the iPad.

The issue with Safari could potentially be related to Ramp #338. It's possible that the Chrome issue could be related to Ramp #354. I will leave this in QA to be re-tested once those are resolved.

[elynema]

This seems to be working ok in Safari, Chrome, and Firefox on my laptop now.

@Dananji @joncameron I'm still seeing some player issues in Chrome on the iPad (player locks up when I try to scrub, etc). I know that may be resolved by Ramp #354, which is not in progress yet.

For the transcript in Chrome on iPad, it no longer gets stuck, but if you have scrolled around in the transcript tab to select another starting point, the auto-scroll of transcript stops working. When you try to scroll in the transcript tab for the first time, the auto-scroll fights you trying to take you back to the current spot in the transcript.

I'm seeing some issues with Safari on iPad, but that may be more to do with scrubbing (and then the whole page crashing), so I think I need to make a separate issue for that, or note it in #338.

In Firefox on Android, I can't scroll down to the transcript tab, so can't test. In Chrome on Android, there's still no audio, so can't test there either.

Shall I make a separate issue for the transcript in Chrome on iPad since that doesn't necessarily have to be fixed this sprint?

[Dananji]

In the current implementation, transcript component stops auto scrolling when the mouse pointer is hovering over the transcript content (when user is actively scrolling the transcript content), which doesn't have an equivalent implementation for touch devices but we probably should.
This could be the reason for auto scroll breaking when interacting with the transcript component on iPads.
Yes, please create a separate issue. Thanks!

[elynema]

Created Ramp #363 for the issues with scrolling within the transcript tab for mobile devices. Noted issues with Safari on Ramp #354. Closing this issue.