fix: hide ad webview when showing fullscreen content (#7110)

* fix: hide ad webview when showing fullscreen content

* fixes

apps/app-frontend/src/App.vue

@@ -95,8 +95,9 @@ import {
 	hide_ads_window,
 	init_ads_window,
 	perform_ads_consent_action,
+	release_ads_window_hold,
 	should_show_ads_consent_popup,
-	show_ads_window,
+	take_ads_window_hold,
 } from '@/helpers/ads.js'
 import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
@@ -166,6 +167,25 @@ function updateHistoryNavigationState() {
 	canNavigateForward.value = historyState?.forward != null
 }
 
+let fullscreenAdsWindowHold = false
+
+async function handleFullscreenChange() {
+	const fullscreen = document.fullscreenElement !== null
+	if (fullscreen === fullscreenAdsWindowHold) return
+
+	fullscreenAdsWindowHold = fullscreen
+	try {
+		if (fullscreen) {
+			await take_ads_window_hold()
+		} else {
+			await release_ads_window_hold()
+		}
+	} catch (error) {
+		fullscreenAdsWindowHold = !fullscreen
+		handleError(error)
+	}
+}
+
 updateHistoryNavigationState()
 
 const APP_LEFT_NAV_WIDTH = '4rem'
@@ -284,8 +304,8 @@ providePageContext({
 })
 provideModalBehavior({
 	noblur: computed(() => !themeStore.advancedRendering),
-	onShow: () => hide_ads_window(),
-	onHide: () => show_ads_window(),
+	onShow: () => take_ads_window_hold(),
+	onHide: () => release_ads_window_hold(),
 })
 
 const {
@@ -360,6 +380,7 @@ onMounted(async () => {
 
 	document.querySelector('body').addEventListener('click', handleClick)
 	document.querySelector('body').addEventListener('auxclick', handleAuxClick)
+	document.addEventListener('fullscreenchange', handleFullscreenChange)
 
 	checkUpdates()
 })
@@ -367,8 +388,13 @@ onMounted(async () => {
 onUnmounted(async () => {
 	document.querySelector('body').removeEventListener('click', handleClick)
 	document.querySelector('body').removeEventListener('auxclick', handleAuxClick)
+	document.removeEventListener('fullscreenchange', handleFullscreenChange)
 	clearDelayedUpdatePopup()
 
+	if (fullscreenAdsWindowHold) {
+		fullscreenAdsWindowHold = false
+		await release_ads_window_hold().catch(handleError)
+	}
 	await unlistenAdsConsent?.()
 	await unlistenUpdateDownload?.()
 })

apps/app-frontend/src/components/ui/SurveyPopup.vue

@@ -3,12 +3,14 @@ import { NotepadTextIcon, XIcon } from '@modrinth/assets'
 import { Button, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { type } from '@tauri-apps/plugin-os'
 import { $fetch } from 'ofetch'
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { release_ads_window_hold, take_ads_window_hold } from '@/helpers/ads.js'
 import { list } from '@/helpers/instance'
 import { get as getCreds } from '@/helpers/mr_auth.ts'
 
+let adsWindowHold = false
+
 type Survey = {
 	id: string
 	tally_id: string
@@ -92,30 +94,44 @@ async function openSurvey() {
 		onOpen: () => console.info('Opened user survey'),
 		onClose: () => {
 			console.info('Closed user survey')
-			show_ads_window()
+			if (adsWindowHold) {
+				adsWindowHold = false
+				release_ads_window_hold()
+			}
 		},
 		onSubmit: () => console.info('Active user survey submitted'),
 	}
 
 	try {
-		hide_ads_window()
+		await take_ads_window_hold()
+		adsWindowHold = true
 		if (tallyWindow.Tally?.openPopup) {
 			console.info(`Opening Tally popup for user survey (form ID: ${formId})`)
 			dismissSurvey()
 			tallyWindow.Tally.openPopup(formId, popupOptions)
 		} else {
 			console.warn('Tally script not yet loaded')
-			show_ads_window()
+			adsWindowHold = false
+			await release_ads_window_hold()
 		}
 	} catch (e) {
 		console.error('Error opening Tally popup:', e)
-		show_ads_window()
+		if (adsWindowHold) {
+			adsWindowHold = false
+			await release_ads_window_hold()
+		}
 	}
 
 	console.info(`Found user survey to show with tally_id: ${formId}`)
-	tallyWindow.Tally?.openPopup(formId, popupOptions)
 }
 
+onUnmounted(() => {
+	if (adsWindowHold) {
+		adsWindowHold = false
+		release_ads_window_hold()
+	}
+})
+
 function dismissSurvey() {
 	if (!availableSurvey.value) return
 	localStorage.setItem(`survey-${availableSurvey.value.id}-display`, String(new Date()))

apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue

@@ -10,7 +10,6 @@ import {
 import { Admonition, Button, ButtonLink, Collapsible, IconButton, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { handleSevereError } from '@/store/error.js'
 
@@ -29,19 +28,13 @@ function show(errorVal: { message?: string }) {
 	matchedError.value = findMinecraftAuthError(rawError.value)
 
 	debugCollapsed.value = true
-	hide_ads_window()
 	modal.value?.show()
 }
 
 function hide() {
-	onModalHide()
 	modal.value?.hide()
 }
 
-function onModalHide() {
-	show_ads_window()
-}
-
 defineExpose({
 	show,
 	hide,
@@ -74,7 +67,7 @@ async function copyToClipboard(text: string) {
 </script>
 
 <template>
-	<NewModal ref="modal" header="Sign in Failed" :max-width="'548px'" @hide="onModalHide">
+	<NewModal ref="modal" header="Sign in Failed" :max-width="'548px'">
 		<div class="flex flex-col gap-6">
 			<Admonition
 				type="warning"

apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue

@@ -3,7 +3,6 @@
 		ref="modal"
 		:header="formatMessage(messages.installToPlay)"
 		:closable="true"
-		:on-hide="show_ads_window"
 		max-width="544px"
 		width="544px"
 	>
@@ -169,7 +168,6 @@ import {
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, nextTick, ref } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads'
 import { get_project, get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
 import { injectServerInstall } from '@/providers/server-install'
 
@@ -352,7 +350,6 @@ async function show(
 
 	if (modpackVersionIdVal) await fetchData(modpackVersionIdVal)
 
-	hide_ads_window()
 	modal.value?.show(e)
 	await nextTick()
 	forceCheckTableScroll()

apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue

@@ -268,7 +268,6 @@ import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, nextTick, ref } from 'vue'
 
 import { config } from '@/config'
-import { hide_ads_window, show_ads_window } from '@/helpers/ads'
 import { toError } from '@/helpers/errors'
 import type { SharedInstanceInstallPreview } from '@/helpers/install'
 import { create_report } from '@/helpers/reports'
@@ -448,7 +447,6 @@ function handleCancel() {
 function handleHide() {
 	resetReportState()
 	creator.value = null
-	show_ads_window()
 }
 function resetReportState() {
 	reportMode.value = false
@@ -488,7 +486,6 @@ function showReport(
 }
 function showPreview(previewValue: SharedInstanceInstallPreview, event?: MouseEvent) {
 	preview.value = previewValue
-	hide_ads_window()
 	modal.value?.show(event)
 	void nextTick(() => forceCheckTableScroll())
 }

apps/app-frontend/src/helpers/ads.js

@@ -8,8 +8,27 @@ export async function init_ads_window(overrideShown = false) {
 	})
 }
 
-export async function show_ads_window() {
-	return await invoke('plugin:ads|show_ads_window', { dpr: window.devicePixelRatio })
+let adsWindowHoldUpdate = Promise.resolve()
+
+async function update_ads_window_hold(acquire) {
+	adsWindowHoldUpdate = adsWindowHoldUpdate
+		.catch(() => {})
+		.then(() =>
+			invoke('plugin:ads|update_ads_window_hold', {
+				acquire,
+				dpr: window.devicePixelRatio,
+			}),
+		)
+
+	return await adsWindowHoldUpdate
+}
+
+export async function take_ads_window_hold() {
+	return await update_ads_window_hold(true)
+}
+
+export async function release_ads_window_hold() {
+	return await update_ads_window_hold(false)
 }
 
 export async function hide_ads_window(reset) {

apps/app-frontend/src/pages/project/Gallery.vue

@@ -93,7 +93,7 @@ import {
 import { ButtonLink, Card, IconButton, useFormatDateTime } from '@modrinth/ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { release_ads_window_hold, take_ads_window_hold } from '@/helpers/ads.js'
 import { trackEvent } from '@/helpers/analytics'
 
 const MC_SERVER_BANNER_NAME = '__mc_server_banner__'
@@ -118,10 +118,14 @@ const filteredGallery = computed(
 const expandedGalleryItem = ref(null)
 const expandedGalleryIndex = ref(0)
 const zoomedIn = ref(false)
+let adsWindowHold = false
 
 const hideImage = () => {
 	expandedGalleryItem.value = null
-	show_ads_window()
+	if (adsWindowHold) {
+		adsWindowHold = false
+		release_ads_window_hold()
+	}
 }
 
 const nextImage = () => {
@@ -149,7 +153,10 @@ const previousImage = () => {
 }
 
 const expandImage = (item, index) => {
-	hide_ads_window()
+	if (!adsWindowHold) {
+		adsWindowHold = true
+		take_ads_window_hold()
+	}
 	expandedGalleryItem.value = item
 	expandedGalleryIndex.value = index
 	zoomedIn.value = false
@@ -181,6 +188,10 @@ onMounted(() => {
 
 onUnmounted(() => {
 	document.removeEventListener('keydown', keyListener)
+	if (adsWindowHold) {
+		adsWindowHold = false
+		release_ads_window_hold()
+	}
 })
 </script>