/* eslint react/jsx-no-bind: 0 */

import React from 'react';
import IconButton from './announcement_icon_button';

const musicList = [
  { name: 'Listen.moe', url: 'https://listen.moe/stream' },
  { name: 'AnimeNfo Radio', url: 'http://itori.animenfo.com:443/;' },
  { name: 'LoFi hip hop Radio', url: 'http://hyades.shoutca.st:8043/stream' },
  { name: 'Linn Classical', url: 'http://89.16.185.174:8004/stream' },
  { name: 'Linn Jazz', url: 'http://89.16.185.174:8000/stream' },
  { name: 'canal-jazz.eu', url: 'http://91.121.59.45:10024/stream' },
  { name: 'Poolside.fm', url: 'http://stream.radio.co/s98f81d47e/listen' },
  { name: 'Drum \'n Bass', sub: 'dubplate.fm', url: 'http://sc2.dubplate.fm:5000/DnB/192' },
  { name: 'FUTURE-BASS-MIX', url: 'http://stream.zenolive.com/am16uk1f4k5tv' },
  {
    name: 'TOP 40 RU',
    sub: 'European Hit Radio',
    url: 'http://stream.europeanhitradio.com:8000/Stream_35.aac',
  },
  {
    name: 'REMIXES RU',
    sub: 'European Hit Radio',
    url: 'http://stream.europeanhitradio.com:8000/Stream_33.aac',
  },
  { name: 'FMHIPHOP.COM', url: 'http://149.56.175.167:5708/;' },
  { name: 'Vapor.fm', url: 'https://vapor.fm:8000/stream' },
];

export default class Music extends React.PureComponent {

  state = {
    audio: new Audio(),
    name: '',
    isPlaying: false,
  };

  musicTogglePlay() {
    const { audio, name, isPlaying } = this.state;

    if (!name) return this.musicChangeSrc(0);

    this.setState({ isPlaying: !isPlaying });
    return isPlaying ? audio.pause() : audio.play();
  }

  musicChangeSrc(index) {
    const { audio } = this.state;

    audio.src = musicList[index].url;
    audio.play();
    this.setState({ name: musicList[index].name, isPlaying: true });
  }

  render () {
    const { name, isPlaying } = this.state;

    return (
      <p>
        <span>{isPlaying ? name : 'Not Playing'}</span>
        <IconButton icon={isPlaying ? 'pause' : 'play'} onClick={() => this.musicTogglePlay()} size={17}  title='Enjoy Kirishima Music!' />
        <br /><br />

        <ul className='musicList'>
          {musicList.map((item, index) => <li onClick={() => this.musicChangeSrc(index)}>{item.name}</li>)}
        </ul>
      </p>
    );
  }

}

/* eslint react/jsx-no-bind: 0 */

import React from 'react';
import IconButton from './announcement_icon_button';

const musicList = [
  { name: 'Listen.moe', url: 'https://listen.moe/stream' },
  { name: 'AnimeNfo Radio', url: 'https://itori.animenfo.com:443/;' },
  { name: 'LoFi hip hop Radio', url: 'https://hyades.shoutca.st:8043/stream' },
  { name: 'Linn Classical', url: 'https://89.16.185.174:8004/stream' },
  { name: 'Linn Jazz', url: 'https://89.16.185.174:8000/stream' },
  { name: 'canal-jazz.eu', url: 'https://91.121.59.45:10024/stream' },
  { name: 'Poolside.fm', url: 'https://stream.radio.co/s98f81d47e/listen' },
  { name: 'Drum \'n Bass', sub: 'dubplate.fm', url: 'https://sc2.dubplate.fm:5000/DnB/192' },
  { name: 'FUTURE-BASS-MIX', url: 'https://stream.zenolive.com/am16uk1f4k5tv' },
  {
    name: 'TOP 40 RU',
    sub: 'European Hit Radio',
    url: 'https://stream.europeanhitradio.com:8000/Stream_35.aac',
  },
  {
    name: 'REMIXES RU',
    sub: 'European Hit Radio',
    url: 'https://stream.europeanhitradio.com:8000/Stream_33.aac',
  },
  { name: 'FMHIPHOP.COM', url: 'https://149.56.175.167:5708/;' },
  { name: 'Vapor.fm', url: 'https://vapor.fm:8000/stream' },
];

export default class Music extends React.PureComponent {

  state = {
    audio: new Audio(),
    name: '',
    isPlaying: false,
  };

  musicTogglePlay() {
    const { audio, name, isPlaying } = this.state;

    if (!name) return this.musicChangeSrc(0);

    this.setState({ isPlaying: !isPlaying });
    return isPlaying ? audio.pause() : audio.play();
  }

  musicChangeSrc(index) {
    const { audio } = this.state;

    audio.src = musicList[index].url;
    audio.play();
    this.setState({ name: musicList[index].name, isPlaying: true });
  }

  render () {
    const { name, isPlaying } = this.state;

    return (
      <p>
        <span>{isPlaying ? name : 'Not Playing'}</span>
        <IconButton icon={isPlaying ? 'pause' : 'play'} onClick={() => this.musicTogglePlay()} size={17}  title='Enjoy Kirishima Music!' />
        <br /><br />

        <ul className='musicList'>
          {musicList.map((item, index) => <li onClick={() => this.musicChangeSrc(index)}>{item.name}</li>)}
        </ul>
      </p>
    );
  }

}

fix web radio