Convert UserActivity to TS
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
parent
1a4a866820
commit
ee4f75cb6e
1 changed files with 59 additions and 62 deletions
|
@ -38,19 +38,16 @@ const RECENTLY_ACTIVE_THRESHOLD_MS = 2 * 60 * 1000;
|
||||||
* see doc on the userActive* functions for what these mean.
|
* see doc on the userActive* functions for what these mean.
|
||||||
*/
|
*/
|
||||||
export default class UserActivity {
|
export default class UserActivity {
|
||||||
constructor(windowObj, documentObj) {
|
private readonly activeNowTimeout: Timer;
|
||||||
this._window = windowObj;
|
private readonly activeRecentlyTimeout: Timer;
|
||||||
this._document = documentObj;
|
private attachedActiveNowTimers: Timer[] = [];
|
||||||
|
private attachedActiveRecentlyTimers: Timer[] = [];
|
||||||
|
private lastScreenX = 0;
|
||||||
|
private lastScreenY = 0;
|
||||||
|
|
||||||
this._attachedActiveNowTimers = [];
|
constructor(private readonly window: Window, private readonly document: Document) {
|
||||||
this._attachedActiveRecentlyTimers = [];
|
this.activeNowTimeout = new Timer(CURRENTLY_ACTIVE_THRESHOLD_MS);
|
||||||
this._activeNowTimeout = new Timer(CURRENTLY_ACTIVE_THRESHOLD_MS);
|
this.activeRecentlyTimeout = new Timer(RECENTLY_ACTIVE_THRESHOLD_MS);
|
||||||
this._activeRecentlyTimeout = new Timer(RECENTLY_ACTIVE_THRESHOLD_MS);
|
|
||||||
this._onUserActivity = this._onUserActivity.bind(this);
|
|
||||||
this._onWindowBlurred = this._onWindowBlurred.bind(this);
|
|
||||||
this._onPageVisibilityChanged = this._onPageVisibilityChanged.bind(this);
|
|
||||||
this.lastScreenX = 0;
|
|
||||||
this.lastScreenY = 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static sharedInstance() {
|
static sharedInstance() {
|
||||||
|
@ -69,8 +66,8 @@ export default class UserActivity {
|
||||||
* later on when the user does become active.
|
* later on when the user does become active.
|
||||||
* @param {Timer} timer the timer to use
|
* @param {Timer} timer the timer to use
|
||||||
*/
|
*/
|
||||||
timeWhileActiveNow(timer) {
|
public timeWhileActiveNow(timer: Timer) {
|
||||||
this._timeWhile(timer, this._attachedActiveNowTimers);
|
this.timeWhile(timer, this.attachedActiveNowTimers);
|
||||||
if (this.userActiveNow()) {
|
if (this.userActiveNow()) {
|
||||||
timer.start();
|
timer.start();
|
||||||
}
|
}
|
||||||
|
@ -85,14 +82,14 @@ export default class UserActivity {
|
||||||
* later on when the user does become active.
|
* later on when the user does become active.
|
||||||
* @param {Timer} timer the timer to use
|
* @param {Timer} timer the timer to use
|
||||||
*/
|
*/
|
||||||
timeWhileActiveRecently(timer) {
|
public timeWhileActiveRecently(timer: Timer) {
|
||||||
this._timeWhile(timer, this._attachedActiveRecentlyTimers);
|
this.timeWhile(timer, this.attachedActiveRecentlyTimers);
|
||||||
if (this.userActiveRecently()) {
|
if (this.userActiveRecently()) {
|
||||||
timer.start();
|
timer.start();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_timeWhile(timer, attachedTimers) {
|
private timeWhile(timer: Timer, attachedTimers: Timer[]) {
|
||||||
// important this happens first
|
// important this happens first
|
||||||
const index = attachedTimers.indexOf(timer);
|
const index = attachedTimers.indexOf(timer);
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
|
@ -112,36 +109,36 @@ export default class UserActivity {
|
||||||
/**
|
/**
|
||||||
* Start listening to user activity
|
* Start listening to user activity
|
||||||
*/
|
*/
|
||||||
start() {
|
public start() {
|
||||||
this._document.addEventListener('mousedown', this._onUserActivity);
|
this.document.addEventListener('mousedown', this.onUserActivity);
|
||||||
this._document.addEventListener('mousemove', this._onUserActivity);
|
this.document.addEventListener('mousemove', this.onUserActivity);
|
||||||
this._document.addEventListener('keydown', this._onUserActivity);
|
this.document.addEventListener('keydown', this.onUserActivity);
|
||||||
this._document.addEventListener("visibilitychange", this._onPageVisibilityChanged);
|
this.document.addEventListener("visibilitychange", this.onPageVisibilityChanged);
|
||||||
this._window.addEventListener("blur", this._onWindowBlurred);
|
this.window.addEventListener("blur", this.onWindowBlurred);
|
||||||
this._window.addEventListener("focus", this._onUserActivity);
|
this.window.addEventListener("focus", this.onUserActivity);
|
||||||
// can't use document.scroll here because that's only the document
|
// can't use document.scroll here because that's only the document
|
||||||
// itself being scrolled. Need to use addEventListener's useCapture.
|
// itself being scrolled. Need to use addEventListener's useCapture.
|
||||||
// also this needs to be the wheel event, not scroll, as scroll is
|
// also this needs to be the wheel event, not scroll, as scroll is
|
||||||
// fired when the view scrolls down for a new message.
|
// fired when the view scrolls down for a new message.
|
||||||
this._window.addEventListener('wheel', this._onUserActivity, {
|
this.window.addEventListener('wheel', this.onUserActivity, {
|
||||||
passive: true, capture: true,
|
passive: true,
|
||||||
|
capture: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Stop tracking user activity
|
* Stop tracking user activity
|
||||||
*/
|
*/
|
||||||
stop() {
|
public stop() {
|
||||||
this._document.removeEventListener('mousedown', this._onUserActivity);
|
this.document.removeEventListener('mousedown', this.onUserActivity);
|
||||||
this._document.removeEventListener('mousemove', this._onUserActivity);
|
this.document.removeEventListener('mousemove', this.onUserActivity);
|
||||||
this._document.removeEventListener('keydown', this._onUserActivity);
|
this.document.removeEventListener('keydown', this.onUserActivity);
|
||||||
this._window.removeEventListener('wheel', this._onUserActivity, {
|
this.window.removeEventListener('wheel', this.onUserActivity, {
|
||||||
passive: true, capture: true,
|
capture: true,
|
||||||
});
|
});
|
||||||
|
this.document.removeEventListener("visibilitychange", this.onPageVisibilityChanged);
|
||||||
this._document.removeEventListener("visibilitychange", this._onPageVisibilityChanged);
|
this.window.removeEventListener("blur", this.onWindowBlurred);
|
||||||
this._window.removeEventListener("blur", this._onWindowBlurred);
|
this.window.removeEventListener("focus", this.onUserActivity);
|
||||||
this._window.removeEventListener("focus", this._onUserActivity);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -151,8 +148,8 @@ export default class UserActivity {
|
||||||
* user's attention at any given moment.
|
* user's attention at any given moment.
|
||||||
* @returns {boolean} true if user is currently 'active'
|
* @returns {boolean} true if user is currently 'active'
|
||||||
*/
|
*/
|
||||||
userActiveNow() {
|
public userActiveNow() {
|
||||||
return this._activeNowTimeout.isRunning();
|
return this.activeNowTimeout.isRunning();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -163,27 +160,27 @@ export default class UserActivity {
|
||||||
* (or they may have gone to make tea and left the window focused).
|
* (or they may have gone to make tea and left the window focused).
|
||||||
* @returns {boolean} true if user has been active recently
|
* @returns {boolean} true if user has been active recently
|
||||||
*/
|
*/
|
||||||
userActiveRecently() {
|
public userActiveRecently() {
|
||||||
return this._activeRecentlyTimeout.isRunning();
|
return this.activeRecentlyTimeout.isRunning();
|
||||||
}
|
}
|
||||||
|
|
||||||
_onPageVisibilityChanged(e) {
|
private onPageVisibilityChanged = e => {
|
||||||
if (this._document.visibilityState === "hidden") {
|
if (this.document.visibilityState === "hidden") {
|
||||||
this._activeNowTimeout.abort();
|
this.activeNowTimeout.abort();
|
||||||
this._activeRecentlyTimeout.abort();
|
this.activeRecentlyTimeout.abort();
|
||||||
} else {
|
} else {
|
||||||
this._onUserActivity(e);
|
this.onUserActivity(e);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
_onWindowBlurred() {
|
private onWindowBlurred = () => {
|
||||||
this._activeNowTimeout.abort();
|
this.activeNowTimeout.abort();
|
||||||
this._activeRecentlyTimeout.abort();
|
this.activeRecentlyTimeout.abort();
|
||||||
}
|
};
|
||||||
|
|
||||||
_onUserActivity(event) {
|
private onUserActivity = (event: MouseEvent) => {
|
||||||
// ignore anything if the window isn't focused
|
// ignore anything if the window isn't focused
|
||||||
if (!this._document.hasFocus()) return;
|
if (!this.document.hasFocus()) return;
|
||||||
|
|
||||||
if (event.screenX && event.type === "mousemove") {
|
if (event.screenX && event.type === "mousemove") {
|
||||||
if (event.screenX === this.lastScreenX && event.screenY === this.lastScreenY) {
|
if (event.screenX === this.lastScreenX && event.screenY === this.lastScreenY) {
|
||||||
|
@ -195,25 +192,25 @@ export default class UserActivity {
|
||||||
}
|
}
|
||||||
|
|
||||||
dis.dispatch({action: 'user_activity'});
|
dis.dispatch({action: 'user_activity'});
|
||||||
if (!this._activeNowTimeout.isRunning()) {
|
if (!this.activeNowTimeout.isRunning()) {
|
||||||
this._activeNowTimeout.start();
|
this.activeNowTimeout.start();
|
||||||
dis.dispatch({action: 'user_activity_start'});
|
dis.dispatch({action: 'user_activity_start'});
|
||||||
|
|
||||||
this._runTimersUntilTimeout(this._attachedActiveNowTimers, this._activeNowTimeout);
|
UserActivity.runTimersUntilTimeout(this.attachedActiveNowTimers, this.activeNowTimeout);
|
||||||
} else {
|
} else {
|
||||||
this._activeNowTimeout.restart();
|
this.activeNowTimeout.restart();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this._activeRecentlyTimeout.isRunning()) {
|
if (!this.activeRecentlyTimeout.isRunning()) {
|
||||||
this._activeRecentlyTimeout.start();
|
this.activeRecentlyTimeout.start();
|
||||||
|
|
||||||
this._runTimersUntilTimeout(this._attachedActiveRecentlyTimers, this._activeRecentlyTimeout);
|
UserActivity.runTimersUntilTimeout(this.attachedActiveRecentlyTimers, this.activeRecentlyTimeout);
|
||||||
} else {
|
} else {
|
||||||
this._activeRecentlyTimeout.restart();
|
this.activeRecentlyTimeout.restart();
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
async _runTimersUntilTimeout(attachedTimers, timeout) {
|
private static async runTimersUntilTimeout(attachedTimers: Timer[], timeout: Timer) {
|
||||||
attachedTimers.forEach((t) => t.start());
|
attachedTimers.forEach((t) => t.start());
|
||||||
try {
|
try {
|
||||||
await timeout.finished();
|
await timeout.finished();
|
Loading…
Reference in a new issue