inactivity-check.ts

export class inactivityCheck {
  private timeoutId: ReturnType<typeof setTimeout>;
  constructor(
    public element: HTMLElement,
    public delay: number,
    public callbackActive: (element: HTMLElement) => void,
    public callbackInactive: (element: HTMLElement) => void
  ) {
    this.setupTimers();
  }

  public setupTimers() {
    this.element.addEventListener('mousemove', this.resetTimer, false);
    this.element.addEventListener('mousedown', this.resetTimer, false);
    this.element.addEventListener('keypress', this.resetTimer, false);
    this.element.addEventListener('touchmove', this.resetTimer, false);

    this.startTimer();
  }

  public startTimer() {
    this.timeoutId = setTimeout(() => this.callbackInactive(this.element), this.delay);
  }

  public resetTimer() {
    this.callbackActive(this.element);
    clearTimeout(this.timeoutId);
    this.startTimer();
  }

  public stopTimers() {
    this.callbackActive(this.element);
    clearTimeout(this.timeoutId);

    this.element.removeEventListener('mousemove', this.resetTimer, false);
    this.element.removeEventListener('mousedown', this.resetTimer, false);
    this.element.removeEventListener('keypress', this.resetTimer, false);
    this.element.removeEventListener('touchmove', this.resetTimer, false);
  }
}

main.ts

import { inactivityCheck } from './inactivity-check';

let checker;

function initialMouseHideOnInactive() {
  checker = new inactivityCheck(
    document.querySelector('#container'),
    2000,
    (element) => element.style.cursor = 'none',
    (element) => element.style.cursor = null
  );
}

function stopMouseHideOnInactive() {
  checker.stopTimers();
}