How to use the screenfull.on function in screenfull

return new Promise(resolve => {
        if (screenfull.enabled) {
          screenfull.on('change', () => {
            console.log('1')
            if (!screenfull.isFullscreen) {
              commit('set', false)
            }
          })
        }
        // end
        resolve()
      })
    },

i18n,
        notice,
        events: { destroyEvents },
        template: { $player },
    } = art;

    const screenfullChange = () => {
        art.emit('fullscreenChange', screenfull.isFullscreen);
    };

    const screenfullError = () => {
        notice.show(i18n.get('Does not support fullscreen'));
    };

    if (player.fullscreenIsEnabled) {
        screenfull.on('change', screenfullChange);
        screenfull.on('error', screenfullError);
        destroyEvents.push(() => {
            screenfull.off('change', screenfullChange);
            screenfull.off('error', screenfullError);
        });
    }

    def(player, 'fullscreen', {
        get() {
            return screenfull.isFullscreen;
        },
        set(value) {
            if (!player.fullscreenIsEnabled) {
                screenfullError();
                return;
            }

init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {

init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {

toggleFullscreen = () => {
    screenfull.on('change', () => {
      if (!screenfull.isFullscreen && this.state.fullscreen) {
        this.setState({
          fullscreen: false,
        });
      }
    });
    if (this.state.fullscreen) {
      screenfull.exit();
    } else {
      screenfull.request(this.editor);
    }
    this.setState({
      fullscreen: !this.state.fullscreen,
    });
  }
  handleOutlineOrderChange = (header, { oldIndex, newIndex }) => {

} else {
                player.$player.classList.remove('flvplayer-loading-show');
            }
        },
    });

    try {
        const screenfullChange = () => {
            if (control.fullscreen) {
                player.$container.classList.add('flvplayer-fullscreen');
            } else {
                player.$container.classList.remove('flvplayer-fullscreen');
            }
            control.autoSize();
        };
        screenfull.on('change', screenfullChange);
        flv.events.destroys.push(() => {
            screenfull.off('change', screenfullChange);
        });
    } catch (error) {
        //
    }

    Object.defineProperty(control, 'fullscreen', {
        get: () => screenfull.isFullscreen || player.$container.classList.contains('flvplayer-fullscreen-web'),
        set: type => {
            if (type) {
                try {
                    screenfull.request(player.$container);
                } catch (error) {
                    player.$container.classList.add('flvplayer-fullscreen-web');
                    control.autoSize();

componentDidMount() {
    screenfull.on('change', this.updateState)
}

engage(): void {
        if (this._engaged) {
            return;
        }

        this._engaged = true;

        if (noFullscrenApi || !screenfull) {
            this._adjustSizeForFullscreen();
            window.addEventListener('resize', this._resizeListener);
            this._engaged = true;
        } else {
            screenfull.on('change', this._changeListener);
            screenfull.request(this._videoDriver.getCanvas());
        }
    }

mounted() {
    if (screenfull.isEnabled) {
      screenfull.on('change', this.changeFullShow)
    }
  },
  methods: {

private initListeners(): void {
    if (screenfull && screenfull.on) {
      screenfull.on('change', this.onFullscreenChange);
    }

    this.leftPlayer.htmlPlayer.addEventListener('canplaythrough', this.onCanPlayThrough);
    this.leftPlayer.htmlPlayer.addEventListener('ended', this.onEnded);
    this.leftPlayer.htmlPlayer.addEventListener('loadstart', this.onLoadStart);
    this.leftPlayer.htmlPlayer.addEventListener('pause', this.onPause);
    this.leftPlayer.htmlPlayer.addEventListener('play', this.onPlay);
    this.leftPlayer.htmlPlayer.addEventListener('seeked', this.onSeeked);
    this.leftPlayer.htmlPlayer.addEventListener('seeking', this.onSeeking);
    this.leftPlayer.htmlPlayer.addEventListener('timeupdate', this.onTimeUpdate);

    this.rightPlayer.htmlPlayer.addEventListener('canplaythrough', this.onCanPlayThrough);
    this.rightPlayer.htmlPlayer.addEventListener('ended', this.onEnded);
    this.leftPlayer.htmlPlayer.addEventListener('pause', this.onPause);
    this.leftPlayer.htmlPlayer.addEventListener('play', this.onPlay);
    this.rightPlayer.htmlPlayer.addEventListener('seeked', this.onSeeked);