RxJS pipe: whilePageIsVisible

whilePageIsVisible.js

import { fromEvent, partition, pipe } from "rxjs";
import { shareReplay, takeUntil, repeatWhen } from "rxjs/operators";

// 🛑 unsubscribes when the browser tab is not active
// ✅ resubscribe when it is becomes active again
export function whilePageIsVisible() {
  const visibilityChange$ = fromEvent(document, "visibilitychange").pipe(   
    shareReplay({ refCount: true, bufferSize: 1 })
  );

  const [pageVisible$, pageHidden$] = partition(visibilityChange$, () =>
    document.visibilityState === "visible"
  );

  return pipe(
    takeUntil(pageHidden$),
    repeatWhen(() => pageVisible$)
  );
}