<template>
  <div :class="$style.wrapper" :style="{marginTop: marginTop}">
    <ModalTitle v-if="audioOnly">
      プレビュー
    </ModalTitle>
    <audio v-if="audioOnly" class="tw-w-full tw-h-24" controls>
      <source :src="musicUrl">
      Your browser does not support the audio element.
    </audio>
    <vue-plyr v-else>
      <video
        class="player"
        controls
        playsinline
        :poster="jacket"
        :src="musicUrl"
        style="--plyr-color-main: #CF7AF1; width: 100%;"
      ></video>
    </vue-plyr>
  </div>
</template>

<script>
export default {
  props: {
    jacket: {
      type: String,
      required: true
    },
    musicUrl: {
      type: String,
      required: true
    },
    marginTop: {
      type: String,
      default: '',
      requiref: false
    },
    audioOnly: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style module lang="scss">
.wrapper{
  position: relative;
  @include mq-pc {
    margin-top: 1.2rem;
  }

  @include mq-sp {
    // margin: 0.6rem -2rem 0 -2rem;
    margin: 0;
  }
}

.status{
  position: absolute;
  top: 2rem;
  left: 2rem;
  /* display: inline-block; */
}

.img{
  width: 100%;
  @include mq-pc {
  }
  @include mq-sp {

  }
}
</style>
