From ffea4f1764a56e04db007b87cba3707399d6b46d Mon Sep 17 00:00:00 2001
From: pbartkowiak-fandom <pbartkowiak@fandom.com>
Date: Tue, 8 Aug 2023 16:32:57 +0200
Subject: [PATCH] Make sure the ad keeps playing

---
 src/jwplayer/players/shared/JwPlayerWrapper.tsx |  9 +++++++--
 src/jwplayer/utils/utils.ts                     | 13 +++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/jwplayer/players/shared/JwPlayerWrapper.tsx b/src/jwplayer/players/shared/JwPlayerWrapper.tsx
index 9648ecda..e990c85b 100644
--- a/src/jwplayer/players/shared/JwPlayerWrapper.tsx
+++ b/src/jwplayer/players/shared/JwPlayerWrapper.tsx
@@ -9,6 +9,7 @@ import JWEvents from 'jwplayer/players/shared/JWEvents';
 import addBaseTrackingEvents from 'jwplayer/players/shared/addBaseTrackingEvents';
 import slugify from 'jwplayer/utils/slugify';
 import getSponsoredVideos from 'utils/getSponsoredVideos';
+import { isInViewportCheck } from 'jwplayer/utils/utils';
 
 interface WindowJWPlayer extends Window {
 	jwplayer?: JWPlayerApi;
@@ -100,9 +101,13 @@ const JwPlayerWrapper: React.FC<JwPlayerWrapperProps> = ({
 				...configWithoutImage,
 			});
 
-			playerInstance.on(JWEvents.AD_PAUSE, ({ pauseReason, viewable }: JWPauseEvent) => {
+			playerInstance.on(JWEvents.AD_PAUSE, ({ pauseReason }: JWPauseEvent) => {
+				const playerElement = document.getElementById('featured-video__player');
+				// The 'viewable' property from the JWPauseEvent is not reliable
+				const isInViewport = isInViewportCheck(playerElement);
+
 				// Keep playing the ad when the user closed the mini player
-				if (viewable === 0 && pauseReason === 'external') {
+				if (isInViewport === false && pauseReason === 'external') {
 					playerInstance.play();
 				}
 			});
diff --git a/src/jwplayer/utils/utils.ts b/src/jwplayer/utils/utils.ts
index 1f8b90db..322ea1b0 100644
--- a/src/jwplayer/utils/utils.ts
+++ b/src/jwplayer/utils/utils.ts
@@ -14,3 +14,16 @@ export const isInGallery = () => {
 	}
 	return false;
 };
+
+export const isInViewportCheck = (element: HTMLElement) => {
+	if (element) {
+		const rect = element.getBoundingClientRect();
+		return (
+			rect.top >= 0 &&
+			rect.left >= 0 &&
+			rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+			rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+		);
+	}
+	return false;
+};