import { h, Component } from 'preact'
import { pngpath, mp3path } from '../../vendor/paths'
const audio = document.createElement('audio')

export default function AudioPlayerView (props) {
  if (props.file) {
    document.body.style.backgroundImage = 'url(' + pngpath(props.file) + ')'
    audio.src = mp3path(props.file)
    audio.currentTime = 0
    audio.play()
    return (
      <div class='audioPlayer' onClick={() => audio.paused ? audio.play() : audio.pause()}>
        Playing {props.file.name}
      </div>
    )
  }
  else {
    audio.pause()
    return (
      <div class='audioPlayer'>
        Not Playing
      </div>
    )
  }
}