Store the lastHover time and compare against it.

private lastHover = 0;
@HostListener(...)
onMouseMove($event) {
    this.lastHover = new Date().getTime()
    This.hideTop = true;
    setTimeout( () => {
        ...
        if(lastHover + 5000 < new Date().getTime()) {
            This.hideTop = true;
        }
    }, 5000)
}

A neat solution would be to use rxjs to solve this like shown below:

ngOnInit(): void {
    fromEvent<MouseEvent>(document, 'mousemove').pipe(tap(() => {
      console.log("show it!");
      this.hideTop = false
    }), switchMap((event) =>
      timer(5000).pipe(tap(() => {
        console.log("hideit");
        this.hideTop = true;
      }))
    )).subscribe();
  }

Don’t forget to unsubscribe if your component gets destroyed to prevent memory leaks!

First we make an Observable from the documents mousemove event.
Now if the event triggers we set hideTop to true.
And here comes the interesting part: we use switchMap with a timer Observable. switchMap automatically unsubscribes from the inner Observable if the outer one emits a new value. Therefore the inner Observable only emits after the user actually stopped moving the mouse for 5 seconds.

Apologies that my answer is in jQuery, but the concept is fairly basic

What we need to do is check if the timeout event has already been fired, and reset it on a mousemove event during that time. This is done by checking if the class for hiding the element is applied or not

//Timer variable
var timer;
//Detect mousemove event on parent element
$("html").on("mousemove", "#outer", function() {

//Is the element already hidden?
  if ($("#inner").hasClass("hide")) {
  //Show the element
    $("#inner").removeClass("hide")
  } else {
  //Reset the timer to 5 seconds
    clearTimeout(timer);
    timer = setTimeout(hideBox, 5000);
  }
})


function hideBox() {
  $("#inner").addClass("hide")
}

https://jsfiddle.net/xcL52zf3/1/

You’ll need to swap out the jQuery event handlers and element targetting with the equivalent for you TypeScript library

i am making a custom video player in which there is an overlay containing the controls of the video player

my player starts to work in full length and height.

now i want to hide the overlay after 5 seconds i stop the mouse over.

now the problem is that when the below function mouse over in .ts file is called the synchronization of the timer is harmed.

so if i move my mouse continuously the overlay starts to flicker.

please provide me the solution to the problem.

following is my html code

<div class="video-container" #videoFullscreen>
    <div class="video-wrapper" mouse-move>
      <video class="video video-js" data-dashjs-player  id="myVideo"  autoplay #videoPlayer>
        <source src="{{ videoSource }}" type="video/mp4" />
      </video>


      <!-- overlay -->
      <div class="overlay" [class.hideOverlay]="hideTop">  
        <!-- top controls  -->
          .
          .
          <!-- lower controls  -->

        </div>
      </div>

this is my type script code

@HostListener('document:mousemove', [ '$event' ]) //fuction to display and hide element sue to mouseover
    onMouseMove($event) {
            this.hideTop = false;
            setTimeout(() => {
                this.hideTop = true;
            }, 5000);
    }

this is my css code :

.overlay {
    display: flex;
}
.hideOverlay {
    display:none;
}

please help me to solve this problem.