Make sure the ad keeps playing

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;
@@ -95,9 +96,13 @@ const JwPlayerWrapper: React.FC<JwPlayerWrapperProps> = ({
 				...config,
 			});
 
-			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();
 				}
 			});

src/jwplayer/utils/utils.ts

@@ -5,3 +5,16 @@ export const getDismissedFn = (inputName: string) => () => {
 	}
 	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;
+};