From 2e0268aaced58024a38d97ddf91d5de5ccd41abd Mon Sep 17 00:00:00 2001
From: DanSnow <dododavid006@gmail.com>
Date: Thu, 1 Feb 2024 16:13:55 +0800
Subject: [PATCH] feat: open paywall after user idle for 1s

---
 src/components/LeakyPaywall.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/LeakyPaywall.vue b/src/components/LeakyPaywall.vue
index 84f2e9df..37be64de 100644
--- a/src/components/LeakyPaywall.vue
+++ b/src/components/LeakyPaywall.vue
@@ -65,9 +65,23 @@ useEventListener(window, 'wheel', (event) => {
   }
 })
 
-// If user scroll over 40%, open the paywall
+const { idle } = useIdle(1000, {
+  events: ['mousedown', 'resize', 'keydown', 'wheel'],
+})
+
+const everIdle = ref(false)
+
+// Detect whenever user idle over 1s
+whenever(idle, () => {
+  everIdle.value = true
+})
+
+// If user scroll over 40%, we will need paywall
+const isNeedPaywall = computed(() => y.value > height.value * 0.4)
+
 whenever(
-  () => y.value > height.value * 0.4,
+  // Only if user idle, and over 40% will open paywall
+  logicAnd(everIdle, isNeedPaywall),
   async () => {
     scrollLock.value = true
     show.value = true