How to use the react-jplayer-utils.connectWithId function in react-jplayer-utils

import { connectWithId } from 'react-jplayer-utils';
import PlayBar from './playBar';

const mapStateToProps = ({ jPlayers }, { id }) => ({
  smoothPlayBar: jPlayers[id].smoothPlayBar,
  currentPercentAbsolute: jPlayers[id].currentPercentAbsolute,
  currentPercentRelative: jPlayers[id].currentPercentRelative,
});

export default connectWithId(mapStateToProps, {})(PlayBar);

import { connectWithId } from 'react-jplayer-utils';
import PlaybackRateBarValue from './playbackRateBarValue';

const mapStateToProps = ({ jPlayers }, { id }) => ({
  verticalPlaybackRate: jPlayers[id].verticalPlaybackRate,
  minPlaybackRate: jPlayers[id].minPlaybackRate,
  maxPlaybackRate: jPlayers[id].maxPlaybackRate,
  playbackRate: jPlayers[id].playbackRate,
});

export default connectWithId(mapStateToProps)(PlaybackRateBarValue);

import { connectWithId } from 'react-jplayer-utils';
import VolumeBarValue from './volumeBarValue';

const mapStateToProps = ({ jPlayers }, { id }) => ({
  verticalVolume: jPlayers[id].verticalVolume,
  muted: jPlayers[id].muted,
  volume: jPlayers[id].volume,
});

export default connectWithId(mapStateToProps)(VolumeBarValue);

import { connectWithId } from 'react-jplayer-utils';
import CurrentTime from './currentTime';

const mapStateToProps = ({ jPlayers }, { id, children }) => ({
  children: children || jPlayers[id].currentTimeText,
});

export default connectWithId(mapStateToProps, {})(CurrentTime);

import { connectWithId } from 'react-jplayer-utils';

import Audio from './audio';

const mapStateToProps = ({ jPlayers }, { id }) => ({
  require: !jPlayers[id].mediaSettings.video,
});

export default connectWithId(mapStateToProps)(Audio);

if (this.props.newTime !== null) {
      this.props.updateMediaTime();
    }

    if (prevProps.playHeadPercent !== this.props.playHeadPercent) {
      this.props.updateMediaTimeAfterSeeking();
    }

    this.props.updateMediaPlayState();
    this.props.updateOtherMediaValues();
  },
};

export default compose(
  connectWithId(mapStateToProps, {
    setOption,
  }),
  withHandlers(handlers),
  setLifecycle(lifecycle),
)(Media);

import { connectWithId } from 'react-jplayer-utils';
import { compose, branch, renderComponent, renderNothing } from 'recompose';

import BrowserUnsupported from './browserUnsupported';

const mapStateToProps = ({ jPlayers }, { id }) => ({
  nonSupported: jPlayers[id].mediaSettings.nonSupported,
});

export default compose(
  connectWithId(mapStateToProps),
  branch(
    props => props.nonSupported,
    renderComponent(BrowserUnsupported),
  ),
)(renderNothing(null));

componentWillMount() {
    document.addEventListener('mouseup', this.props.onMouseUp);
    document.addEventListener('mousemove', this.props.onMouseMove);
    document.addEventListener('touchmove', this.props.onTouchMove, { passive: false });
    document.addEventListener('touchend', this.props.onTouchEnd);
  },
  componentWillUnmount() {
    document.removeEventListener('mouseup', this.props.onMouseUp);
    document.removeEventListener('mousemove', this.props.onMouseMove);
    document.removeEventListener('touchmove', this.props.onTouchMove);
    document.removeEventListener('touchend', this.props.onTouchEnd);
  },
};

export default compose(
  connectWithId(mapStateToProps),
  withHandlers(handlers),
  setLifecycle(lifecycle),
)(Bar);

import { connectWithId } from 'react-jplayer-utils';
import { compose, branch, renderComponent, renderNothing } from 'recompose';

import Audio from './audio';

const mapStateToProps = ({ jPlayers }, { id }) => ({
  require: !jPlayers[id].mediaSettings.video,
});

export default compose(
  connectWithId(mapStateToProps),
  branch(
    props => props.require,
    renderComponent(Audio),
  ),
)(renderNothing(null));

import { connectWithId } from 'react-jplayer-utils';
import { compose, branch, renderComponent, renderNothing } from 'recompose';

import Download from './download';

const mapStateToProps = ({ jPlayers }, { id }) => ({
  free: jPlayers[id].media.free,
  url: jPlayers[id].src,
});

export default compose(
  connectWithId(mapStateToProps),
  branch(
    props => props.free,
    renderComponent(Download),
  ),
)(renderNothing(null));