Как включить видимость пользовательского компонента video-js при бездействии пользователя

Question

Я использую VideoJS с реакцией и создал пользовательский компонент строки заголовка, используя videojs-overlay. Я хочу, чтобы когда пользователь неактивен (мышь не двигается), эта строка заголовка должна исчезать и исчезать по мере того, как пользователь перемещает мышь. Это делается в ControlBar компонент, а вот для нестандартных компонентов как это сделать непонятно.

      var TitleBar = videojs.extend(Component, {
    constructor: function () {
        // It is important to invoke the superclass before anything else,
        // to get all the features of components out of the box!
        Button.apply(this, arguments);
    },

    // The `createEl` function of a component creates its DOM element.
    createEl: function () {
        return videojs.dom.createEl('div', {
            //want to toggle show/hide on user activity here with CSS classes
            className: `vjs-title-bar`,
            alt: 'Title Bar',
            innerHTML: `
            <div class="back-btn" >
                <button onclick="alert(1234)" >
                    <span>
                        <i class="fas fa-long-arrow-left"></i>
                    </span>
                </button>
            </div>
            `,
        });
    },
});

Любая помощь будет высоко оценена

Answer 1

У меня нет опыта с реакцией, но попробуйте следующее: после

      Button.apply(this, arguments);

добавить что-то вроде:

      this.on(this.player(), ["useractive", "userinactive"], this.showHide);

затем добавьте эту функцию в компонент:

      showHide: function(ev) {
    if (ev.type === 'userinactive') {
        this.hide() //hide immediately! 
        //if you want animation, add class to your css and do this.addClass("myHideClass")
    } else {
        this.show();
    }
}