PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Convert UserActivity to TS

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-10-13 17:38:49 +01:00
parent 1a4a866820
commit ee4f75cb6e
1 changed files with 59 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
src/UserActivity.js → src/UserActivity.ts
View file

@ -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();