{"version":3,"file":"AudioPlaylistListItem-Cnn5IG5F.js","sources":["../../src/components/audio/AudioPlaylistListItem.vue"],"sourcesContent":["<template>\n  <button\n    type=\"button\"\n    :class=\"$style.button\"\n    :aria-label=\"`${isPlaying ? 'Pause' : 'Play'}`\"\n    @click.prevent=\"$emit('audioAction', $event)\"\n    @keypress.prevent=\"$emit('audioAction', $event)\"\n  >\n    <span :class=\"$style.track\">\n      <span :class=\"$style.icon\">\n        <component\n          :is=\"isPlaying && isActive(index) ? IconPauseCircle : IconPlayCircle\"\n          :key=\"isPlaying && isActive(index) ? 'pause' : 'play'\"\n          :class=\"$style.playPause\"\n          role=\"img\"\n        ></component>\n      </span>\n      <span :class=\"$style.counter\">\n        <span>{{ index + 1 }}.</span>\n      </span>\n      <span :class=\"$style.playlistTitle\" v-html=\"title\"></span>\n    </span>\n    <span :class=\"$style.duration\">{{ formatDuration(duration) }}</span>\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { formatDuration } from '@/utils';\nimport IconPauseCircle from '@/assets/svgs/IconPauseCircle.svg?component';\nimport IconPlayCircle from '@/assets/svgs/IconPlayCircle.svg?component';\nimport { storeToRefs } from 'pinia';\nimport { useAudioStore } from '@/stores/audioStore';\n\nconst props = defineProps<{\n  duration: string;\n  id: number;\n  index: number;\n  title: string;\n}>();\n\ndefineEmits({\n  audioAction: null,\n});\n\nconst store = useAudioStore();\nconst { audioId, currentTrack, isPlaying } = storeToRefs(store);\n\nfunction isActive(index: number): boolean {\n  return audioId && currentTrack && audioId.value === props.id && currentTrack.value === index;\n}\n</script>\n\n<style lang=\"scss\" module>\n.button {\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  padding: 1rem 0;\n  width: 100%;\n\n  &:focus {\n    background-color: $black;\n    color: $white;\n\n    .icon {\n      svg {\n        fill: $white;\n      }\n    }\n  }\n}\n.counter {\n  flex-shrink: 0;\n  margin-left: 0.75rem;\n  width: px-to-rem(20);\n\n  span {\n    float: right;\n  }\n}\n.duration {\n  margin-left: 1rem;\n}\n.icon {\n  cursor: pointer;\n  height: 1.5rem;\n}\n.play-pause {\n  align-self: center;\n  cursor: pointer;\n  fill: $black;\n  height: 1.5rem;\n  width: 1.5rem;\n}\n.playlist-title {\n  cursor: pointer;\n  margin-left: 1rem;\n  text-align: initial;\n  word-break: break-word;\n}\n.track {\n  align-items: center;\n  display: flex;\n}\n</style>\n"],"names":["props","__props","store","useAudioStore","audioId","currentTrack","isPlaying","storeToRefs","isActive","index"],"mappings":"2ZAiCA,MAAMA,EAAQC,EAWRC,EAAQC,EAAc,EACtB,CAAE,QAAAC,EAAS,aAAAC,EAAc,UAAAC,CAAU,EAAIC,EAAYL,CAAK,EAE9D,SAASM,EAASC,EAAwB,CACxC,OAAOL,GAAWC,GAAgBD,EAAQ,QAAUJ,EAAM,IAAMK,EAAa,QAAUI,CAAA"}