Method render

src/app/components/Common/Player/Player.tsx:105–213

()

  };

  public render() {
    const { mk, modal, lyricsModal, queueModal } = this.props;
    const nowPlayingItem = mk.mediaItem && mk.mediaItem.item;

    if (!nowPlayingItem) {
      return null;
    }

    const artworkURL = artworkForMediaItem(nowPlayingItem, 60);

    const { repeatMode } = mk.instance.player;

    const isRepeating = repeatMode === RepeatModeOne || repeatMode === RepeatModeAll;

    const hasMeta = nowPlayingItem.assets.length > 0;

    const artistName = hasMeta ? (
      <Link to={`/artist/${nowPlayingItem.assets[0].metadata.artistId}`}>
        <span className={cx(styles.artistName, styles.link)}>
          {nowPlayingItem.attributes.artistName}
        </span>
      </Link>
    ) : (
      <span className={cx(styles.artistName)}>{nowPlayingItem.attributes.artistName}</span>
    );

    const albumName = hasMeta ? (
      <span
        className={cx(styles.albumName, styles.link)}
        onClick={() => this.handleOpenAlbum(modal.replace)}
      >
        {nowPlayingItem.attributes.albumName}
      </span>
    ) : (
      <span className={cx(styles.albumName)}>{nowPlayingItem.attributes.albumName}</span>
    );

    return (
      <div className={styles.player}>
        <div className={styles.mainInfo}>
          <div className={styles.picture}>
            <img src={artworkURL} className={styles.image} alt={'album artwork'} />
          </div>
          <div className={styles.track}>
            <h1>{nowPlayingItem.title}</h1>
            {artistName}
            {albumName}
          </div>
        </div>
        <PlayerTime nowPlayingItem={nowPlayingItem} />
        <div className={styles.buttons}>
          <span onClick={this.handlePrevious}>
            <i className={'fas fa-backward'} />
          </span>
          {mk.instance.player.isPlaying ? (
            <span className={styles.main} onClick={pause}>
              <i className={'fas fa-pause'} />
            </span>