How to use the clappr.Player function in clappr

change () {
    const { streamUrl, media, autoplay = false, playCallback = () => null } = this.props
    if (streamUrl && media) {
      if (this.player) {
        this.destroyPlayer()
      }

      this.player = new Clappr.Player({
        parent: this.playerRef.current,
        source: streamUrl,
        autoPlay: autoplay,
        poster: {
          // if the first image doesn't work, it'll fall back to the second
          custom: [
            `url(${media.screenshot_image && withProxy(media.screenshot_image.full_url)}) top left / cover no-repeat`,
            `url(${media.screenshot_image && replaceHttps(media.screenshot_image.full_url)}) top left / cover no-repeat`,
            // absolute final option
            `url(https://via.placeholder.com/640x360?text=No+Image) top left / cover no-repeat`
          ].join(', ')
        },
        plugins: {
          core: [Clappr.MediaControl, LevelSelector, ChromecastPlugin, ResponsiveContainer, PlaybackRatePlugin]
        },
        playback: {

new IPFS({
      bitswap: {
        maxMessageSize: 128 * 1024
      },
      repo: "paratii-" + String(Math.random() + Date.now()).replace(/\./g, ""),
      config: {
        Addresses: {
          Swarm: ["/dns4/star.paratii.video/tcp/443/wss/p2p-webrtc-star"]
        },
        Bootstrap: [
          "/dns4/bootstrap.paratii.video/tcp/443/wss/ipfs/QmeUmy6UtuEs91TH6bKnfuU1Yvp63CkZJWm624MjBEBazW"
        ]
      }
    });

  const player = new Clappr.Player({
    source,
    poster,
    mimeType,
    parentId: selector,
    width: "100%",
    height: "100%",
    chromeless: true,
    position: "top-right",
    watermarkLink: "http://paratii.video/",
    playback: {
      hlsjsConfig: {
        fLoader: HlsjsIpfsLoader,
        ipfs: ipfsNode,
        ipfsHash,
        enableWorker: true,
        autoLevelEnabled: true,

componentDidMount() {
    this.player = new Clappr.Player({
      parent: this.playerRef,
      source: '',
      width: '0',
      height: '0',
      autoPlay: false,
      hlsjsConfig: {
        enableWorker: true,
      },
    });
    const Events = Clappr.Events;
    this.player.on(Events.PLAYER_TIMEUPDATE, progress => {
      this.props.dispatch.player.setTime({ currentTime: progress.current, totalTime: progress.total });
    });

    this.player.on(Events.PLAYER_ENDED, () => {
      const { repeat } = this.props.player;