<script>
import { inject, watch } from 'vue'
import { Options, Vue } from "vue-class-component";
import posterImgPath from '../../assets/audio-poster.png';

@Options({
  props: {
    playing: Boolean
  }
})
class AudioPoster extends Vue {
  constructor(props) {
    super(props);

    this.posterImgPath = posterImgPath;
  }

  onPlayPauseChanged(play) {
    console.warn('onPlayPauseChanged() ' + play);
  }
}

export default AudioPoster;
</script>

<template>
<div
 :style="{
    left: 380,
    top: 10,
    width: 512,
    height: 512,
    backgroundImage: posterImgPath,
    animation: (playing ? 'PosterRotate 6s infinite linear' : null),
  }"
/>
</template>

<style scoped>
@keyframes PosterRotate {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
</style>
