скрытие оверлея через некоторое время, как у стандартного видеоплеера

Question

Я делаю пользовательский видеоплеер, в котором есть оверлей, содержащий элементы управления видеопроигрывателем

Мой проигрыватель начинает работать во всю длину и высоту.

Теперь я хочу скрыв оверлей через 5 секунд, я прекращаю наведение мыши.

теперь проблема в том, что когда указанная ниже функция вызывает указатель мыши в файле .ts, синхронизация таймера нарушается.

так если я постоянно двигаю мышь, наложение начинает мерцать.

, пожалуйста, предоставьте мне решение проблемы.

ниже мой html код

<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 мой код сценария типа

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

это мой код css:

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

пожалуйста, помогите мне решить эту проблему.

Answer 1

Сохранение времени lastHover и сравнение с ним.

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)
}

Answer 2

Извиняюсь, что мой ответ в jQuery, но концепция довольно основна c

Что нам нужно сделать, это проверить, было ли уже запущено событие тайм-аута, и сбросить его при перемещении мыши событие в течение этого времени. Это делается путем проверки, применяется ли класс для сокрытия элемента

//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/

Вам нужно поменять jQuery обработчики событий и нацеливание элементов с эквивалентной для вас библиотекой TypeScript

Answer 3

Хорошим решением было бы использовать rx js для решения этой проблемы, как показано ниже:

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

Не забудьте отписаться, если ваш компонент будет уничтожен во избежание утечек памяти!

Сначала мы делаем Observable из события documents mousemove. Теперь, если событие срабатывает, мы устанавливаем hideTop в true. И тут возникает интересная часть: мы используем switchMap с timer Observable. switchMap автоматически отписывается от внутреннего Observable, если внешнее выдает новое значение. Поэтому внутренний Observable испускается только после того, как пользователь фактически перестал двигать мышь в течение 5 секунд.