How to use @vimeo/player - 10 common examples

import Player from '@vimeo/player';

// based on README.md of @vimeo/player >> https://github.com/vimeo/player.js

let player: Player ;

player = new Player('handstick', {
    id: 19231868,
    width: 640,

    // Use default values for settings, to test typings
    autopause: true,
    autoplay: false,
    background: false,
    byline: true,
    color: '#00adef',
    loop: false,
    muted: false,
    playsinline: true,
    portrait: true,
    speed: false,
    title: true,
    transparent: true

mounted: function() {
    if (!(this.vimeoId || this.videoSrc)) {
      throw new Error('You must pass in a "vimeoId" or a "videoSrc"')
    }

    if (this.vimeoId) {
      const player = new VimeoPlayer('vimeo-player')
      player.ready().then(() => {
        player.play()
      })
      // TODO: Instead of emitting completed, requires end screen UI.
      //        Currently a stop gap to provide Intro support.
      player.on('ended', () => this.$emit('completed'))
    } else if (this.videoSrc) {
      new Plyr(this.$refs['player'], { captions: {active: true } })
    }
  }
}

createPlayer() {
    const { start, volume } = this.props;

    this.player = new Player(this.container, this.getInitialOptions());

    Object.keys(eventNames).forEach((dmName) => {
      const reactName = eventNames[dmName];
      this.player.on(dmName, (event) => {
        // eslint-disable-next-line react/destructuring-assignment
        const handler = this.props[reactName];
        if (handler) {
          handler(event);
        }
      });
    });

    const { onReady } = this.props;
    if (onReady) {
      this.player.ready().then(() => {
        onReady(this.player);

}
    if (this.options_.maxheight) {
      vimeoOptions.maxheight = this.options_.maxheight;
    }
    if (this.options_.maxwidth) {
      vimeoOptions.maxwidth = this.options_.maxwidth;
    }
    if (this.options_.loop) {
      vimeoOptions.loop = this.options_.loop;
    }
    if (this.options_.color) {
      // vimeo is the only API on earth to reject hex color with leading #
      vimeoOptions.color = this.options_.color.replace(/^#/, '');
    }

    this._player = new VimeoPlayer(this.el(), vimeoOptions);
    this.initVimeoState();

    ['play', 'pause', 'ended', 'timeupdate', 'progress', 'seeked'].forEach(e => {
      this._player.on(e, (progress) => {
        if (this._vimeoState.progress.duration !== progress.duration) {
          this.trigger('durationchange');
        }
        this._vimeoState.progress = progress;
        this.trigger(e);
      });
    });

    this._player.on('pause', () => this._vimeoState.playing = false);
    this._player.on('play', () => {
      this._vimeoState.playing = true;
      this._vimeoState.ended = false;

onImageClick: function(e) {
      let src = e.target.src
      src = src.slice(src.search('/images'))
      let video = (this.videoLevels.find(l => l.thumbnail_unlocked == src) || {})
      let frame = $('.video-frame')[0]
      frame.src = me.showChinaVideo() ? video.cn_url : video.url
      frame.style['z-index'] = 3
      $('#videos-content')[0].style.display = "none"
      $('#video-close-btn')[0].style.display = "block"
      if(!me.showChinaVideo()){
        const p = new VideoPlayer(frame);
        p.play().catch((err) => console.log("Error while playing the video:", err))
      }
    }
  },

ref={ref => {
                    if (!loaded && ref) {
                      new Player(ref).on("play", () => setLoaded(true))
                    }
                  }}
                  tabIndex="-1"

width,
      onEnded,
      onError,
      onPause,
      onPlay,
      onTimeUpdate,
      onVolumeChange,
    } = this.props;

    Object.assign(config,
      videoId ? {id: videoId} : {},
      videoUrl ? {url: videoUrl} : {},
      {height, width}
    );

    this.player = new Player(this.refPlayer, config);
    this.player.on('ended', onEnded);
    this.player.on('error', onError);
    this.player.on('pause', onPause);
    this.player.on('play', onPlay);
    this.player.on('timeupdate', onTimeUpdate);
    this.player.on('volumechange', onVolumeChange);

    this.player.ready()
      .then(this.onPlayerReady);

    return Promise.resolve(this.player);
  }

mounted () {
    const options = {
      id: this.videoId,
      width: this.playerWidth,
      height: this.playerHeight,
      loop: this.loop,
      autoplay: this.autoplay
    }

    this.player = new Player(this.elementId, assign(options, this.options))

    this.setEvents()
  },
  beforeDestroy () {

vimeoOptions.height = this.options_.height;
    }
    if(this.options_.width) {
      vimeoOptions.width = this.options_.width;
    }
    if(this.options_.maxheight) {
      vimeoOptions.maxheight = this.options_.maxheight;
    }
    if(this.options_.maxwidth) {
      vimeoOptions.maxwidth = this.options_.maxwidth;
    }
    if(this.options_.loop) {
      vimeoOptions.loop = this.options_.loop;
    }

    this._player = new VimeoPlayer(this.el(), vimeoOptions);
    this.initVimeoState();

    ['play', 'pause', 'ended', 'timeupdate', 'progress', 'seeked'].forEach(e => {
      this._player.on(e, (progress) => {
        if(this._vimeoState.progress.duration != progress.duration) {
          this.trigger('durationchange');
        }
        this._vimeoState.progress = progress;
        this.trigger(e);
      });
    });

    this._player.on('pause', () => this._vimeoState.playing = false);
    this._player.on('play',  () => {
      this._vimeoState.playing = true;
      this._vimeoState.ended = false;

useEffect(() => {
    if (open && videoRef) {
      player.current = new Player(videoRef.current)
    } else {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth",
      })
    }
  }, [videoRef, open])