{"version":3,"sources":["Components/Headline/Headline.js","Components/Menu/Menu.js","Components/Music/Music.js","Components/App/App.js","index.js"],"names":["withRouter","props","suffix","currentPath","location","pathname","className","to","href","rel","target","icon","faLinkedin","faGithub","faPlayCircle","playerState","playing","paused","stopped","MusicList","items","onPress","map","item","key-id","_id","onClick","e","src","alt","artist","title","album","year","label","MusicButton","state","id","Music","useState","error","data","setData","stream","player","setPlayer","prevPlayer","useRef","useEffect","fetch","then","result","json","reverse","current","pause","play","Audio","stop","currentTime","message","event","nextId","currentTarget","getAttribute","handleMusics","states","App","exact","path","from","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.3d5d6f86.chunk.js","sourcesContent":["import React from 'react'\n\nimport { Link, withRouter } from 'react-router-dom'\n\nimport './Headline.css'\n\nconst Headline = (props) => {\n  let suffix = ''\n  const currentPath = props.location.pathname\n  if (currentPath !== '/') {\n    suffix = currentPath\n  }\n  \n  return (\n    <div className='Headline'>\n      <Link to='/'>dantran.fr</Link>{suffix}\n    </div>\n  )\n}\n\nexport default withRouter(Headline)\n","import React from 'react'\n\nimport { Link, withRouter } from 'react-router-dom'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons'\nimport { faPlayCircle } from '@fortawesome/free-regular-svg-icons'\n\nimport './Menu.css'\n\nconst Menu = (props) => {\n  if (props.location.pathname === '/') {\n    return (\n      <div className='Menu'>\n        <ul>\n          <li>\n            <a href='https://www.linkedin.com/in/dan-tran' rel='noreferrer' target='_blank'>\n              LinkedIn\n            </a>\n            <FontAwesomeIcon className='MenuIcon' icon={faLinkedin} />\n          </li>\n          <li>\n            <a href='https://github.com/MrDanao' rel='noreferrer' target='_blank'>\n              GitHub\n            </a>\n            <FontAwesomeIcon className='MenuIcon' icon={faGithub} />\n          </li>\n          <li>\n            <Link to='/music'>\n              Music\n            </Link>\n            <FontAwesomeIcon className='MenuIcon' icon={faPlayCircle} />\n          </li>\n        </ul>\n      </div>\n    )\n  } else {\n    return null\n  }\n}\n\nexport default withRouter(Menu)\n","import React, { useState, useEffect, useRef } from 'react'\n\nimport './Music.css'\n\nconst playerState = {\n  playing: 'playing',\n  paused: 'paused',\n  stopped: 'stopped'\n}\n\nconst Music = () => {\n  const [data, setData] = useState({\n    items: [],\n    error: null\n  })\n\n  const [player, setPlayer] = useState({\n    id: null,\n    stream: null,\n    state: playerState.stopped\n  })\n\n  const prevPlayer = useRef(player)\n\n  useEffect(() => {\n    fetch('https://api.dantran.fr/music')\n\t\t\t.then(result => result.json())\n\t\t\t.then(result => {\n        setData({\n          items: result.reverse()\n        })\n\t\t\t}, error => {\n        setData({\n          error: error\n        })\n      })\n    \n    return () =>  {\n      const player = prevPlayer.current\n      if (player.state !== playerState.stopped) {\n        player.stream.pause()\n      }\n    }\n    // eslint-disable-next-line\n  }, [])\n\n  useEffect(() => {\n    prevPlayer.current = player\n  }, [player])\n\n  const play = (id) => {\n    const url = 'https://object.dantran.fr/music/' + id + '/audio'\n    const stream = new Audio(url)\n    stream.play()\n    setPlayer({\n      id: id,\n      stream: stream,\n      state: playerState.playing\n    })\n  }\n\n\tconst stop = () => {\n\t\tconst stream = player.stream\n\t\tstream.pause()\n\t\tstream.currentTime = 0\n    setPlayer({\n      id: null,\n      stream: null,\n      state: playerState.stopped\n    })\n\t}\n\n\tconst handleMusics = (event) => {\n\t\tconst nextId = event.currentTarget.getAttribute('key-id')\n\t\tconst { id, stream } = player\n\t\tif (nextId === id) {\n\t\t\tstop()\n\t\t\treturn\n\t\t}\n\t\tif (stream === null) {\n\t\t\tplay(nextId)\n\t\t} else {\n\t\t\tstop()\n\t\t\tplay(nextId)\n\t\t}\n\t}\n\n\tconst handleButton = () => {\n\t\tconst { stream, state } = player\n\t\tif (state === playerState.playing) {\n\t\t\tstream.pause()\n      setPlayer({\n        stream: stream,\n        state: playerState.paused\n      })\n\t\t} else if (state === playerState.paused) {\n\t\t\tstream.play()\n\t\t\tsetPlayer({\n        stream: stream,\n        state: playerState.playing\n      })\n\t\t}\n\t}\n\n  if (data.error) {\n    return <div>Error: {data.error.message}</div>\n  } \n\n  return (\n    <div className='Music'>\n      <p className='MusicCaption'>\n        Click on covers to play/stop\n      </p>\n      <MusicList\n        items={data.items}\n        onPress={(e) => handleMusics(e)}\n      />\n      <MusicButton\n        state={player.state}\n        states={playerState}\n        onPress={handleButton}\n      />\n    </div>\n  )\n}\n\nconst MusicList = ({ items, onPress }) => {\n  return (\n    <ul className='MusicList'>\n      {items.map((item) => (\n        <li\n          className='MusicItem'\n          key={item._id}\n          key-id={item._id}\n          onClick={(e) => onPress(e)}\n        >\n          <img\n            className='MusicItemImage'\n            src={'https://object.dantran.fr/music/' + item._id + '/image'}\n            alt={item._id}\n          />\n          <div className='MusicItemInfo'>\n            <p>{item.artist} - {item.title}</p>\n            <p>{item.album}</p>\n            <p>&#8471; {item.year} {item.label}</p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  )\n}\n\nconst MusicButton = ({ state, onPress }) => {\n  if (state !== playerState.stopped) {\n    return (\n      <span id='MusicButton' className='material-icons' onClick={onPress}>\n        {state === playerState.playing ? 'pause' : 'play_arrow'}\n      </span>\n    )\n  }\n  return null\n}\n\nexport default Music\n","import React from 'react'\n\nimport { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom'\n\nimport Headline from '../Headline/Headline'\nimport Menu from '../Menu/Menu'\nimport Music from '../Music/Music'\n\nconst App = () => (\n  <div>\n    <BrowserRouter>\n      <Headline />\n      <Menu />\n      <Switch>\n        <Route exact path='/' />\n        <Route exact path='/music'>\n          <Music />\n        </Route>\n        <Redirect from='*' to='/' />\n      </Switch>\n    </BrowserRouter>\n  </div>\n)\n\nexport default App\n","import React from 'react'\nimport ReactDOM from 'react-dom'\n\nimport App from './Components/App/App'\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n)\n"],"sourceRoot":""}