Handle browsers that don't support IntersectionObserver (#1739)

* Remove ad-handling in videojs.jsx

Primary impetus is to remove unnecessary IntersectionObserver usage, but it should be removed anyway because:
- no longer relevant today with Adnimation's script.
- we also globally hide floating ads now, so no more invisible divs.
- the code is wrongly placed -- it's not the responsibility of the Videojs component.

* use-lazy-loaded: skip if IntersectionObserver is not supported

## Issue
Page not loading in older Safari (e.g. ipad air 2)

## Approach
Instead of using a polyfill (which comes with implementation caveats), just not apply the lazy-loading for those old browsers. Not lazy-loading is better than not loading at all, plus this is way easier to test (even by just reading the code) than testing out the polyfill implementation's caveats.

The cons is we would need the polyfill if we use it in other places in the future.

## Code Changes
Factor out the src-setting code, and use it directly when IntersectionObserver is not found.

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -525,33 +525,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
             });
         }
       }
-
-      // fix invisible vidcrunch overlay on IOS  << TODO: does not belong here. Move to ads.jsx (#739)
-      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

ui/effects/use-lazy-loading.js

@@ -26,39 +26,46 @@ export default function useLazyLoading(
     return Math.ceil(value * devicePixelRatio);
   }
 
+  function loadImgFromDataset(target, backgroundFallback, setSrcLoadedFn) {
+    // lazy-loaded <img>:
+    if (target.dataset.src) {
+      // $FlowFixMe
+      target.src = target.dataset.src;
+      setSrcLoadedFn(true);
+      // No fallback handling here (clients have access to 'onerror' on the image ref).
+      return;
+    }
+
+    // lazy-loaded `background-image`:
+    if (target.dataset.backgroundImage) {
+      if (backgroundFallback) {
+        const tmpImage = new Image();
+        tmpImage.onerror = () => {
+          target.style.backgroundImage = `url(${backgroundFallback})`;
+        };
+        tmpImage.src = target.dataset.backgroundImage;
+      }
+      target.style.backgroundImage = `url(${target.dataset.backgroundImage})`;
+    }
+  }
+
   useEffect(() => {
     if (!elementRef.current) {
       return;
     }
 
+    if (!window.IntersectionObserver) {
+      loadImgFromDataset(elementRef.current, backgroundFallback, setSrcLoaded);
+      return;
+    }
+
     const lazyLoadingObserver = new IntersectionObserver(
       (entries, observer) => {
         entries.forEach((entry) => {
           if (entry.intersectionRatio >= threshold) {
             const { target } = entry;
-
             observer.unobserve(target);
-
-            // useful for lazy loading img tags
-            if (target.dataset.src) {
-              // $FlowFixMe
-              target.src = target.dataset.src;
-              setSrcLoaded(true);
-              // No fallback handling here (clients have access to 'onerror' on the image ref).
-              return;
-            }
-
-            // useful for lazy loading background images on divs
-            if (target.dataset.backgroundImage) {
-              if (backgroundFallback) {
-                const tmpImage = new Image();
-                tmpImage.onerror = () => {
-                  target.style.backgroundImage = `url(${backgroundFallback})`;
-                };
-                tmpImage.src = target.dataset.backgroundImage;
-              }
-              target.style.backgroundImage = `url(${target.dataset.backgroundImage})`;
-            }
+            loadImgFromDataset(target, backgroundFallback, setSrcLoaded);
           }
         });
       },