@speechkit/speechkit-audio-player/src/players/PlaylistPlayer/PlaylistPlayer.js

A web player component that can play audio from https://speechkit.io

import { template, forEach, merge, pick } from 'lodash'
import { bindPropWithElement } from '../../utils'
import { setHTML } from '../../utils/html'
import { formatDate } from '../../utils/DateUtils'
import timeFormatter from '../../utils/TimeFormatter'
import defineLanguage from '../../utils/Language'

import PlayerBase from '../PlayerBase'
import ViewTemplate from './view/view.html'
import playImage from '../images/playmin.svg'
import kickerPlayImage from '../images/play-kicker.svg'
import pauseImage from '../images/pausemin.svg'
import kickerPauseImage from '../images/pause-kicker.svg'

import './styles/player.scss'
import './styles/player-desktop.scss'
import { MAP_PROP_CS, MAP_PROPS_CS, UI_CONTROLS, VISIBLE_ITEMS } from './constants'

class PlaylistPlayer extends PlayerBase {
  buildPlayerView(options = {}) {
    const compiled = template(ViewTemplate)
    const totalDuration = this.getTotalDuration()
    const { publisherLogo, publisher, visibleItems } = options
    const hasPublisherLogo = typeof(publisherLogo) !== "undefined" && publisherLogo.length > 0
    this.visibleItems = Number.parseInt(visibleItems, 10) || VISIBLE_ITEMS
    const { language } = this.options
    const lang = defineLanguage(language)

    return compiled(merge(options, {
      forEach,
      formatDate: date => formatDate(date, true, lang),
      totalDuration,
      podcasts: this.podcasts,
      podcast: this.podcast,
      currentPlaylistPodcastIndex: this.currentPlaylistPodcastIndex,
      hasPublisherLogo,
      publisher,
    }))
  }

  setupUIBindings() {
    bindPropWithElement(MAP_PROP_CS, this)
    bindPropWithElement(MAP_PROPS_CS, this, true)
  }

  getCommonUIControls() {
    return pick(this, UI_CONTROLS)
  }

  updateUIState() {
    super.updateUIState()
    const {
      playListBox,
      playlistItems,
      visibleItems,
      currentPlaylistPodcastIndex,
      playlistPlayPauseButtons,
    } = this
    const { title } = this.getCurrentPodcast()

    Array.from(playlistPlayPauseButtons).forEach(el => {
      setHTML(el, this.icons.playIcon)
    })

    playlistItems[currentPlaylistPodcastIndex].style.backgroundColor = '#000000'
    if (playListBox && playListBox.children && playListBox.children.length) {
      const listBoxHeight = playListBox.children[0].offsetHeight * visibleItems
      if (!Number.isNaN(listBoxHeight) && listBoxHeight !== playListBox.offsetHeight) {
        playListBox.style.maxHeight = `${listBoxHeight}px`
        this.postCurrentHeight()
      }
    }

    setHTML(this.title, title)
    setHTML(playlistPlayPauseButtons[currentPlaylistPodcastIndex], this.isPlaying() ? this.icons.pauseIcon : this.icons.playIcon)
  }

  progressDidUpdate(currentTime, duration) {
    super.progressDidUpdate(currentTime, duration)

    if (Number.isNaN(currentTime)) {
      currentTime = 0
    }

    setHTML(this.timeCurrent, timeFormatter(currentTime))
  }

  getCurrentPodcast = () => (
    this.podcasts[this.currentPlaylistPodcastIndex] || {}
  )

  getTotalDuration() {
    const podcast = this.getCurrentPodcast()
    const { duration } = podcast.media[0] || {}

    return timeFormatter(duration || 0)
  }

  get icons() {
    const { isKicker } = this
    const pauseIcon = isKicker ? kickerPauseImage : pauseImage
    const playIcon = isKicker ? kickerPlayImage : playImage
    return { pauseIcon, playIcon }
  }
}

export default PlaylistPlayer