<template lang="pug">
.o-audio-player
    .o-audio-player__element(
        ref="audioPlayer"
        data-module="audioPlayer"
        :data-audio-id="``"
    )
        audio
            source(
                :src="audioFile"
                :type="fileType"
            )
        .o-audio-player__controls.flex.flex-start.bg-white.my-4.p-4.flex-col.sm-flex-row
            .p-0.sm-pr-4(
				v-if="imageSrc"
			)
                img(:src="imageSrc").w-full
            .w-full
                .row
                    .col-12
                        p.font-700.text-lg.p-0.sm-px-4.mt-6.mb-2.sm-my-2 {{ audioFileName }}
                .row
                    .col-12.flex.flex-row.items-center
                        button.o-audio-player__play-button.pl-0.pr-4.sm-px-4.py-2.focus-outline-none.cursor-pointer
                            Icon.o-icon--xl(name="play-icon" path="/spritemap.svg")
                        .o-audio-player__timeline.relative.rounded.py-2.w-full.cursor-pointer
                            .o-audio-player__timeline-visual.absolute.w-full
                            .o-audio-player__playhead.absolute
                                .o-audio-player__playhead__icon.rounded.bg-primary
                            .o-audio-player__playhead__total-bar.absolute.bg-primary.rounded
                        .o-audio-player__timestamp.px-4.my-4.pointer-events-none.select-none(draggable="false")
                            p.o-audio-player__timestamp__duration.m-0.pointer-events-none 00:00
                        .o-audio-player__volume.px-2.pl-0.relative
                            Icon.o-icon--lg(name="volume-high" path="/spritemap.svg").cursor-pointer
                            .o-audio-player__volume__controls.absolute.bg-white.border.border-grey-01
                                .o-audio-player__volume__track.m-2.relative
                                    .o-audio-player__volume__button.absolute.bg-primary
                        .o-audio-player__menu.px-1.cursor-pointer.border.border-transparent.hover-border-grey-01.flex.flex-col.items-center
                            Icon.o-icon--lg(name="more-horizontal" path="/spritemap.svg")
                            .o-audio-player__menu__list.p-2.bg-white.shadow
                                .o-audio-player__menu__list-item.px-2
                                    a(:href="audioFile" download) Download
</template>
<script>
import $ from 'jquery'
import { addInitialPluginsAndHydrate } from '@/utils/conditioner'

export default {
	components: {
		Icon: () => import(/* webpackChunkName: "Icon" */ '@/components/Icon'),
	},
	props: {
		/** path to the audio file */
		audioFile: {
			type: String,
			default: '',
		},
		/** The audio file name, appears as the title of the component */
		audioFileName: {
			type: String,
			default: '',
		},
		/** The file type is required to let the audio element know the correct codec, defaults to mp3 */
		fileType: {
			type: String,
			default: 'audio/mpeg',
		},
		/** A relevant image for the audio file is displayed in the component.
		 *  The image div defaults to dsiplay:none if no image is provided.
		 *  The image must be square.
		 */
		imageSrc: {
			type: String,
			default: '',
		},
	},
	mounted() {
		addInitialPluginsAndHydrate(this.$el)
	},
}
</script>
<docs>
```jsx
<AudioPlayer 
    audioFile="audio/testaudio.mp3"
    audioFileName="Test audio file"
    imageSrc="images/music-image.jpg" 
/>
```
</docs>
