CSS & JS Effect – Do something on enter/leave window tab

const beforeWindowOpenTime = performance.now();
window.open(generateWhatsAppLink(whatsAppNumberBS.value, message), '_blank');

// note 解忧:
// 这里有一个 user back from WhatsApp 后 show submitted feedback 的体验。
// 它比较复杂，因为手机有 bug，
// 正常情况下 visibilitychange 会 dispatch when user leave/enter tab，离开 state = hidden，回来 state = visible。
// so when window open WhatsApp, dispatch lever tab 咯, when user close WhatsApp, dispatch enter tab 咯.
// 但是我的 android 有鬼。
// when window open WhatsApp，它会先 leave + enter 1 次, 紧接着又 leave 1 次, 直到 user back
// 所以下面代码需要顾虑它第一轮假的 leave + enter
const [visible$, hidden$] = partition(
  fromEvent(window, 'visibilitychange').pipe(share()),
  () => document.visibilityState === 'visible',
);

// 监听第一次 visible
visible$.pipe(take(1)).subscribe(() => {
  const now = performance.now();
  // 如果第一次 visible 超过 1 秒
  if (now - beforeWindowOpenTime >= 1000) {
    // 直接 show feedback，因为 android 鬼是很快的，绝对不会超过 1 秒
    showSubmittedFeedback();
    return;
  }

  // 如果小于 1 秒，那可能是 android 鬼，或者 user 真的很快就 close WhatsApp
  // 我们尝试监听 hidden，如果是 android 鬼，那么 2 秒内会触发 hidden
  // 如果 2 秒后没有 hidden 那判定是 user close 很快。
  hidden$.pipe(take(1), timeout({ first: 2000 })).subscribe({
    next() {
      // android 鬼的话，等待下一次的 visible 表示 user close
      visible$.pipe(take(1)).subscribe(() => showSubmittedFeedback());
    },
    error() {
      // user close 的话，直接 show feedback
      showSubmittedFeedback();
    },
  });

  function showSubmittedFeedback() {
    setTimeout(() => {
      submitFeedbackReCaptchaContainer.submitFeedbackReCaptchaContainerController.showSubmittedFeedback();
    }, 1000);
  }
});