chad-music/web/src/Queue.js

import { Link } from 'react-router5'
import './Queue.css';
import {slugify, formatDuration} from './utils.js';

export default function Queue({queue, dispatch}) {
  return (
    <aside className="Queue">
      <h2>Queue</h2>
      <table><tbody>
          {queue.items.map((track, i) => (
            <tr key={i} className={ i === queue.pos ? "Queue-active" : "" }>
              <td>{i+1}</td>
              <td>{track.title}</td>
              <td><Link routeName="artist" routeParams={{artist: slugify(track.album_artist || track.artist)}}>{track.artist}</Link></td>
              <td>{track.year}</td>
              <td><Link routeName="album" routeParams={{artist: slugify(track.album_artist || track.artist), album: slugify(track.album)}}>{track.album}</Link></td>
              <td>{track.no}</td>
              <td>{track.bit_rate} kbps</td>
              <td>{formatDuration(track.duration)}</td>
              <td><button onClick={() => dispatch({type:'QUEUE_PLAY', payload: i})}>
                  <svg viewBox="0 0 24 24"><g><path d="M8 5v14l11-7z"/></g></svg>
              </button></td>
            </tr>))}
    </tbody></table>
      </aside>
  );
}