Example RxJS Observable when mouse or click activity Re-starts

Question

I'm able to create 2 observables to watch mouse move and click events as such:

var mousemove$ = Rx.Observable.fromEvent(document, 'mousemove');
var click$ = Rx.Observable.fromEvent(document, 'click');

I'm also able to use merge() and debounceTime() to wait for either mousemove or click to not happen for 10 seconds like this:

var allactivity$ = Rx.Observable.merge(
    mousemove$.mapTo('Mouse!'),
    click$.mapTo('Click!')
  );

var lastact$ = allactivity$.debounceTime(10000);

However, I would like to somehow construct an observable for when a user Re-starts either moving the mouse or clicking after this 10 second debounceTime() limit.

Could someone help me construct this Observable? I think I'm missing something simple.

Answer 1

You could use something like this:

var restart$ = Rx.Observable.of('Kick off')
  .merge(lastact$)
  .mergeMap(() => allactivity$.skipUntil(lastact$).first());

Explanation

• Rx.Observable.of('Kick off') - Once in the beginning, ...
• .merge(lastact$) - and for everytime lastact$ emits, ...
• .mergeMap(() => ...) - create an observable ...
• allactivity$ - that will observe on allactivity$ for all items...
• .skipUntil(lastact$) - since the firstlastact$ emission (after the creation of this observable) ...
• .first() - and take only the first item (that is, the first activity happen after the lastact$ emit)

Edit:

The above observable will not trigger on the first mouse move, to handle that:

var firstMoveAndRestart$ = restart$.merge(allactivity$.first());