Recording: Bring playlist in front of video.js modals #3762
Conversation
Ensure that the playlist doesn't get covered by video.js error messages, preventing interaction.
|
On 0.11.0-rc3 where this was merged, the player controls are no longer tappable on my iPhone on iOS Safari and Firefox. This change may have inadvertently caused the issue. I'm investigating further. |
|
@hawkeye217 Oh interesting, for me they work on the left side. Looks like even if the playlist screen is hidden it is still absorbing the presses from the UI underneath. Looks like the full screen button doesn't work either. |
|
Yep. It's just a z-index issue and seems to affect every browser I've tried. It may be possible to apply the z-index to the child div that gets shown/hidden instead. I'm checking that out now. |
|
Applying z-10 to the child divs for both the popout button and the video list (and removing it from the parent where this PR set it) seems to work for me. What about for you, @mellbye? |
|
@hawkeye217 I would go ahead and make a PR. I just tested this as well in both normal cases and cases where there is an error and it works in both cases now 👌 |
|
Interesting. The skip forward and full screen buttons still work for me on Firefox/iOS14, despite being in the space occupied by the sidebar. But the buttons in between don't. I won't have a chance to test it until later tonight, but it sounds like a good fix. |
Ensure that the recording playlist pane doesn't get covered by video.js error messages, preventing interaction. This currently happens whenever a video is unplayable, such as when trying to view h.265 content in a browser without support. The playlist is still useful to scroll through the recording history even if the videos don't play, and in cases where a single video file is corrupted, being able to interact with the playlist to select another file is essential.
A z-index of 2 seems to be sufficient to stack the playlist above the video.js modals, but the "z-10" utility class seemed like the easiest way to do it.
Before
After