chad-music/web/src/Controls.js

import './Controls.css';
import logo from './logo.svg';
import Sound from 'react-sound';
import {slugify,formatDuration} from './utils.js';

export default function Controls({queue, error, sound, dispatch}) {
  const track = queue.items[queue.pos] || {};
  const playing = sound.playStatus === Sound.status.PLAYING;
  const elapsed = sound.position ? formatDuration(sound.position/1000) : '';
  const duration = sound.duration ? formatDuration(sound.duration/1000) : '';

  return (
    <footer className="Controls">
      <div className="Controls-progress">
        <progress className="Controls-bar" value={sound.position} min="0" max={sound.duration}></progress>
      </div>
      {duration && <span className="Controls-time">{elapsed} / {duration}</span>}
      {error && <span className="Controls-error">{error.code}: {error.desc}</span>}
      <img src={track.cover || logo} alt={track.album} />
      <div className="Controls-artist"><a href={`/${slugify(track.album_artist)}/`}>{track.artist}</a></div>
      <div className="Controls-album"><a href={`/${slugify(track.album_artist)}/${slugify(track.album)}`}>{track.album}{track.year && ` [${track.year}]`}</a></div>
      <div className="Controls-title">{track.no && `${track.no}. `}{track.title}</div>
      <div className="Controls-buttons">
        <button disabled={queue.pos < 1} onClick={()=>dispatch({type: 'CONTROL_PREV'})}>
          <svg viewBox="0 0 24 24"><g><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"></path></g></svg>
        </button>
        <button disabled={queue.pos < 0}
                onClick={()=>dispatch({type: (playing ? 'CONTROL_PAUSE' : 'CONTROL_PLAY')})}>
          {playing
            ? <svg viewBox="0 0 24 24"><g><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></g></svg>
            : <svg viewBox="0 0 24 24"><g><path d="M8 5v14l11-7z"/></g></svg>
          }
        </button>
        <button disabled={sound.playStatus === Sound.status.STOPPED}
                onClick={()=>dispatch({type: 'CONTROL_STOP'})}>
          <svg viewBox="0 0 24 24"><g><path d="M6 6v12h12v-12z"/></g></svg>
        </button>
        <button disabled={(queue.pos+1) >= queue.items.length} onClick={()=>dispatch({type: 'CONTROL_NEXT'})}>
          <svg viewBox="0 0 24 24"><g><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"></path></g></svg>
        </button>
      </div>
    </footer>
  );
}