scorer-ui-kit 1.2.7-liveboard-patch.9 → 1.2.7-liveboard-patch.10

package/dist/index.js

@@ -4779,6 +4779,7 @@ var LineUIRTCWithFallback = function LineUIRTCWithFallback(_ref) {
       showHandle = _ref$options$showHand === void 0 ? true : _ref$options$showHand,
       showGrabHandle = _ref$options.showGrabHandle;
   var frame = React.useRef();
+  var containerRef = React.useRef(null);
   var imageRef = React.useRef(null);
   var pollIntervalRef = React.useRef(null);
 
@@ -4894,8 +4895,23 @@ var LineUIRTCWithFallback = function LineUIRTCWithFallback(_ref) {
       setBoundaries(getCanvasBounds());
     }
   }, [videoSize, loaded]);
-  var onLoadedMetadata = React.useCallback(function (_ref2) {
-    var target = _ref2.target;
+  React.useEffect(function () {
+    if (!loaded || !containerRef.current) return;
+    var observer = new IntersectionObserver(function (_ref2) {
+      var entry = _ref2[0];
+
+      if (entry.isIntersecting && frame.current) {
+        setScreenCTM(frame.current.getScreenCTM());
+        setBoundaries(getCanvasBounds());
+      }
+    });
+    observer.observe(containerRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [loaded]);
+  var onLoadedMetadata = React.useCallback(function (_ref3) {
+    var target = _ref3.target;
 
     if (target && target.videoWidth > 50 && target.videoHeight > 50) {
       setLoaded(true);
@@ -4966,7 +4982,9 @@ var LineUIRTCWithFallback = function LineUIRTCWithFallback(_ref) {
     showHandle: showHandle,
     showGrabHandle: showGrabHandle
   };
-  return React__default.createElement(Container$6, null, React__default.createElement(Video$2, {
+  return React__default.createElement(Container$6, {
+    ref: containerRef
+  }, React__default.createElement(Video$2, {
     style: {
       display: useFallback ? 'none' : 'block'
     },