Video overlay not tracking with scroll position of <video>

[benallfree]

Hi, is this a known issue? I have to call cordova.plugins.iosrtc.refreshVideos() in order to adjust the overlay after scrolling.

Expected behavior

When <video> element changes position, the video overlay should change too.

Observed behavior

Video overlay stays in a fixed floating position when underlying video element scrolls.

Steps to reproduce the problem

Please see https://github.com/benallfree/cordova-arjs-showcase/tree/master/demos/iosrtc-cam-demos

Notice that it snaps into place when I call cordova.plugins.iosrtc.refreshVideos() via the Safari debugger.

<div style={{ height: '10000px', paddingTop: 200 }}>
      <h1>Positioning Test</h1>
      <video
        autoPlay
        playsInline
        ref={video}
        style={{ backgroundColor: 'green' }}
      ></video>
    </div>

Platform information

• Cordova version: 9
• Plugin version: 6.0.9
• iOS version: 13
• Xcode version: 11.3.1

[hthetiot]

Hello @benallfree thank you for creating an issue properly.

That not a bug but expected behavior, we do not refresh video automatically, here is what I recommend to do:

// Scan every 500ms for refreshing video tag position and on various user events.
var scanVideoTagTimer,
    scanVideoTagInterval = 500;

function scanVideoTag() {
    clearTimeout(scanVideoTagTimer);
    var shouldRefreshingVideos = $window.document.querySelectorAll('video').length > 0;
    if (shouldRefreshingVideos) {
        $window.cordova.plugins.iosrtc.refreshVideos();
    }
    scanVideoTagTimer = setTimeout(scanVideoTag, scanVideoTagInterval);
};

// Start scanVideoTag
scanVideoTagTimer = setTimeout(scanVideoTag, scanVideoTagInterval);

window.onorientationchange = scanVideoTag;
window.addEventListener('touchstart', scanVideoTag);
window.addEventListener('click', scanVideoTag);
window.addEventListener('touchmove', scanVideoTag);
window.addEventListener('touchend', scanVideoTag);

You can also only refresh on user events, but in production this is what we do to hide video tag when there is a modal or a change of zIndex for example.

[hthetiot]

I will update the documentation for next release, if you confirm this solutions works for you @benallfree

[hthetiot]

Note: we already handle rotation here https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/js/iosrtc.js#L83

[hthetiot]

Closed due inactivity of reporter.
Will reply if reporter manifest himself.