PromucFlow_constructor/app/client/src/sagas/PageVisibilitySagas.ts

33 lines
1.0 KiB
TypeScript

import { EventChannel, eventChannel } from "redux-saga";
import { call, fork, put, take } from "redux-saga/effects";
import { pageVisibilityAppEvent } from "actions/pageVisibilityActions";
// Track page visibility
// https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
function listenToVisibilityEvents() {
return eventChannel((emitter) => {
document.addEventListener("visibilitychange", emitter, false);
return () => {
document.removeEventListener("visibilitychange", emitter, false);
};
});
}
function* handleTabVisibilityConnection() {
const channel: EventChannel<unknown> = yield call(listenToVisibilityEvents);
while (true) {
const event: { target: { visibilityState: VisibilityState } } = yield take(
channel,
);
// Only invoke when page gets visible
if (event.target && event.target.visibilityState === "visible") {
yield put(pageVisibilityAppEvent(event.target.visibilityState));
}
}
}
export default function* rootSaga() {
yield fork(handleTabVisibilityConnection);
}