{"version":3,"file":"AudioHeader-_KnIyf3D.js","sources":["../../src/components/audio/AudioHeader.vue"],"sourcesContent":["<template>\n  <header>\n    <PostFeaturedImage\n      v-if=\"audioData.featuredImage\"\n      :class=\"$style.audioCover\"\n      :is-aspect=\"true\"\n      :is-wide=\"audioData.featuredImageWidth === 'wide'\"\n      :featured-image=\"audioData.featuredImage.node\"\n      :srcset=\"audioData.imageSrcset\"\n      :ga4-data='`{\"click_type\": \"hero\", \"component\": \"AudioHeader\", \"content_group\": \"audio\", \"gtm_tag\": \"image\", \"file_name\": \"${audioData.featuredImage.node.sourceUrl.split(\"/\").pop()}\"}`'>\n    </PostFeaturedImage>\n    <div :class=\"$style.header\">\n      <nav>\n        <BackLink\n          component=\"AudioHeader\"\n          group=\"audio\"\n          label=\"Audio\"\n          name=\"AudioSection\"\n        ></BackLink>\n      </nav>\n      <div :class=\"$style.audioTitle\">\n        <h1 v-html=\"audioData.title\"></h1>\n        <button\n          type=\"button\"\n          class=\"button-reset\"\n          :aria-label=\"`${isPlaying ? 'Pause' : 'Play'}`\"\n          @click.prevent=\"prepareAudio($event)\"\n        >\n          <KeepAlive>\n            <IconPlayCircle\n              v-if=\"!isPlaying || !isCurrentTrackPlaying\"\n              :class=\"$style.svg\"\n            ></IconPlayCircle>\n            <IconPauseCircle v-else :class=\"$style.svg\"></IconPauseCircle>\n          </KeepAlive>\n        </button>\n      </div>\n      <div :class=\"[$style.postMeta, 'subtitle-2', 'space-0-above']\">\n        <span v-if=\"isPlaylist\">{{ audioData.tracks.length }} tracks</span>\n        <time :datetime=\"formatTimeDuration(audioData.duration)\">\n          {{ formatDuration(audioData.duration) }}\n        </time>\n        <span>{{ audioData.scCreatedAt }}</span>\n      </div>\n    </div>\n  </header>\n</template>\n\n<script setup lang=\"ts\">\nimport { AudioData } from '@/types/audio.interface';\nimport { AudioState } from '@/types/audio.store.interface';\nimport BackLink from '@/components/common/BackLink.vue';\nimport { computed } from 'vue';\nimport { formatDuration, formatTimeDuration } from '@/utils';\nimport IconPauseCircle from '@/assets/svgs/IconPauseCircle.svg?component';\nimport IconPlayCircle from '@/assets/svgs/IconPlayCircle.svg?component';\nimport PostFeaturedImage from '@/components/common/PostFeaturedImage.vue';\nimport { storeToRefs } from 'pinia';\nimport { useAudioStore } from '@/stores/audioStore';\n\nconst props = defineProps<{\n  audioData: AudioData;\n}>();\n\nconst store = useAudioStore();\nconst { audioElement, audioId, isPlaying } = storeToRefs(store);\nconst { updateAudioState } = store;\n\nconst isCurrentTrackPlaying = computed(() => {\n  if (audioId && audioId.value && props.audioData.__typename.includes('track')) {\n    return audioId.value === props.audioData.databaseId;\n  }\n\n  if (audioId && audioId.value && isPlaylist.value) {\n    if (audioId.value === props.audioData.databaseId) {\n      return true;\n    }\n\n    return (\n      audioId.value === props.audioData.databaseId &&\n      props.audioData.tracks.findIndex((track) => +track.trackId === audioId.value) !== -1\n    );\n  }\n\n  return false;\n});\nconst isPlaylist = computed(() => props.audioData.__typename === 'Audio_playlist');\n\nfunction prepareAudio(event: PointerEvent | MouseEvent): void {\n  updateAudioState({ isInitial: false, lastFocused: event.target });\n\n  const preparedAudioData: AudioState = {};\n\n  if (audioId && audioId.value !== props.audioData.databaseId) {\n    if (audioElement && audioElement.value) {\n      // reset\n      audioElement.value.removeAttribute('src');\n      audioElement.value.pause();\n      audioElement.value.currentTime = 0;\n      audioElement.value.load();\n    }\n\n    preparedAudioData.audioId = props.audioData.databaseId;\n    preparedAudioData.currentTrack = 0;\n    preparedAudioData.isPlaying = true;\n    preparedAudioData.playlistTitle = isPlaylist.value ? props.audioData.title : '';\n    preparedAudioData.tracks = isPlaylist.value ? props.audioData.tracks : [props.audioData];\n  } else {\n    if (isPlaying) {\n      preparedAudioData.isPlaying = !isPlaying.value;\n    }\n  }\n\n  preparedAudioData.source = 'permalink';\n  updateAudioState(preparedAudioData);\n}\n</script>\n\n<style lang=\"scss\" module>\n.audio-cover {\n  background-color: $white;\n}\n\n.audio-title {\n  align-items: center;\n  display: grid;\n  grid-template-areas: \"a b\";\n  grid-template-columns: 6rem 1fr;\n\n  button {\n    grid-area: a;\n    height: 6rem;\n    width: 6rem;\n  }\n\n  h1 {\n    text-align: left;\n    grid-area: b;\n    margin-left: 0.5rem;\n  }\n}\n\n.svg {\n  cursor: pointer;\n  display: inline-block;\n  flex-shrink: 0;\n  height: 6rem;\n  width: 6rem;\n\n  &:hover {\n    path {\n      fill: $black-hover;\n    }\n  }\n}\n\n.post-meta {\n  > * {\n    &::after {\n      content: '|';\n      margin: 0 0.25rem;\n    }\n\n    &:last-child {\n      &::after {\n        content: '';\n      }\n    }\n  }\n\n  a {\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n\n      svg {\n        fill: $black-hover;\n      }\n    }\n  }\n\n  svg {\n    fill: $black;\n    margin-right: 0.5rem;\n    height: 0.75rem;\n    width: 0.75rem;\n  }\n}\n\n@media (min-width: $break-point) {\n  .audio-title {\n    flex-wrap: wrap;\n\n    button,\n    svg {\n      height: 6rem;\n      width: 6rem;\n    }\n  }\n\n  .header {\n    @include grid;\n\n    > * {\n      grid-column: 1 / span 8;\n    }\n\n    nav {\n      grid-column: span 12;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","store","useAudioStore","audioElement","audioId","isPlaying","storeToRefs","updateAudioState","isCurrentTrackPlaying","computed","isPlaylist","track","prepareAudio","event","preparedAudioData"],"mappings":"8hBA4DA,MAAMA,EAAQC,EAIRC,EAAQC,EAAc,EACtB,CAAE,aAAAC,EAAc,QAAAC,EAAS,UAAAC,CAAU,EAAIC,EAAYL,CAAK,EACxD,CAAE,iBAAAM,GAAqBN,EAEvBO,EAAwBC,EAAS,IACjCL,GAAWA,EAAQ,OAASL,EAAM,UAAU,WAAW,SAAS,OAAO,EAClEK,EAAQ,QAAUL,EAAM,UAAU,WAGvCK,GAAWA,EAAQ,OAASM,EAAW,MACrCN,EAAQ,QAAUL,EAAM,UAAU,WAC7B,GAIPK,EAAQ,QAAUL,EAAM,UAAU,YAClCA,EAAM,UAAU,OAAO,UAAWY,GAAU,CAACA,EAAM,UAAYP,EAAQ,KAAK,IAAM,GAI/E,EACR,EACKM,EAAaD,EAAS,IAAMV,EAAM,UAAU,aAAe,gBAAgB,EAEjF,SAASa,EAAaC,EAAwC,CAC5DN,EAAiB,CAAE,UAAW,GAAO,YAAaM,EAAM,OAAQ,EAEhE,MAAMC,EAAgC,CAAC,EAEnCV,GAAWA,EAAQ,QAAUL,EAAM,UAAU,YAC3CI,GAAgBA,EAAa,QAElBA,EAAA,MAAM,gBAAgB,KAAK,EACxCA,EAAa,MAAM,MAAM,EACzBA,EAAa,MAAM,YAAc,EACjCA,EAAa,MAAM,KAAK,GAGRW,EAAA,QAAUf,EAAM,UAAU,WAC5Ce,EAAkB,aAAe,EACjCA,EAAkB,UAAY,GAC9BA,EAAkB,cAAgBJ,EAAW,MAAQX,EAAM,UAAU,MAAQ,GAC3De,EAAA,OAASJ,EAAW,MAAQX,EAAM,UAAU,OAAS,CAACA,EAAM,SAAS,GAEnFM,IACgBS,EAAA,UAAY,CAACT,EAAU,OAI7CS,EAAkB,OAAS,YAC3BP,EAAiBO,CAAiB,CAAA"}