From 373766c5b56d5826f594d665a89123e3111df873 Mon Sep 17 00:00:00 2001
From: mayeaux <instacoins@gmail.com>
Date: Mon, 10 Jan 2022 22:21:55 +0100
Subject: [PATCH] Fix vidcrunch on ios to only show ad when its scrolled to
 (#651)

* fix vidcrunch on ios to only show ad when its scrolled to

* clean up and optimize code
---
 .../viewers/videoViewer/internal/videojs.jsx  | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index 2f0074bf6..99fecdb89 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -337,6 +337,33 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       // load video once source setup
       // $FlowFixMe
       vjsPlayer.load();
+
+      // fix invisible vidcrunch overlay on IOS
+      if (IS_IOS) {
+        // ads video player
+        const adsClaimDiv = document.querySelector('.ads__claim-item');
+
+        if (adsClaimDiv) {
+          // hide ad video by default
+          adsClaimDiv.style.display = 'none';
+
+          // ad containing div, we can keep part on page
+          const adsClaimParentDiv = adsClaimDiv.parentNode;
+
+          // watch parent div for when it is on viewport
+          const observer = new IntersectionObserver(function(entries) {
+            // when ad div parent becomes visible by 1px, show the ad video
+            if (entries[0].isIntersecting === true) {
+              adsClaimDiv.style.display = 'block';
+            }
+
+            observer.disconnect();
+          });
+
+          // $FlowFixMe
+          observer.observe(adsClaimParentDiv);
+        }
+      }
     })();
 
     // Cleanup