Currently, I am attempting to create a delay for the mouseenter event when the user hovers over a div. The goal is for the video to start playing only after the user has hovered for at least 1 second.
Initially, everything works as expected, but after the first time, it seems like the observable is behaving strangely and not emitting anything.
For instance, if I hover for less than 1 second on the first attempt and then return and hover for over a second, it does not trigger the event.
<div (mouseenter)="onMouseEnter($event)" (mouseleave)="onMouseLeave($event)"><div>
private _mouseEnterStream: EventEmitter<any> = new EventEmitter();
private _mouseLeaveStream: EventEmitter<any> = new EventEmitter();
onMouseEnter($event) {
this._mouseEnterStream.emit($event);
}
onMouseLeave($event) {
this._mouseLeaveStream.emit($event);
}
ngOnInit() {
this._mouseEnterStream.pipe(flatMap((e) => {
console.log(this._mouseLeaveStream)
return of(e);
}), delay(1000), takeUntil(this._mouseLeaveStream)).subscribe((e)=> {
console.log('mouseenter');
this.loadVideo();
});
this._mouseLeaveStream.subscribe((e) => {
console.log('mouseleave');
this.pauseVideo();
});
}
It is peculiar that if I include the following code snippet:
this._mouseEnterStream.pipe(flatMap((e) => {
console.log(this._mouseLeaveStream)
return of(e);
}), delay(1000), takeUntil(this._mouseLeaveStream)).subscribe((e)=> {
console.log('mouseenter');
this.loadVideo();
});
within this section:
this._mouseLeaveStream.subscribe((e) => {
console.log('mouseleave');
this.pauseVideo();
});
it works, but it doesn't seem like the correct approach.
Therefore, I need to figure out a way to ensure that this behavior is repeated for it to function correctly.
this._mouseEnterStream.pipe(flatMap((e) => {
console.log(this._mouseLeaveStream)
return of(e);
}), delay(1000), takeUntil(this._mouseLeaveStream)).subscribe((e)=> {
console.log('mouseenter');
this.loadVideo();
});