{"version":3,"mappings":";unBAEO,MAAMA,EAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCC0GnBC,EAAA,CACb,YAAYC,EAAQC,EAAc,CAChC,OAAO,IAAI,QAAc,CAACC,EAASC,IAAW,CAC5CF,EACG,aAAa,CACZ,MAAOJ,EACP,UAAW,CACT,KAAMG,EAAO,KACf,CACD,EACA,KAAK,IAAME,GAAS,EACpB,MAAOE,GAAQD,EAAOC,CAAG,CAAC,EAC9B,EAEL,4DAzEA,MAAMC,EAAYC,EAAqB,IAAMC,EAAA,WAAO,yBAAkC,yBAAC,EAEjFC,EAAQC,EAIR,CAAE,YAAAC,CAAY,EAAIC,EAAe,EACjC,CAAE,mBAAAC,EAAoB,aAAAC,CAAa,EAAIC,EAAY,EAEnDC,EAAQC,EAAc,EACtB,CAAE,QAAAC,EAAS,aAAAC,EAAc,UAAAC,EAAW,UAAAC,CAAU,EAAIC,EAAYN,CAAK,EACnE,CAAE,iBAAAO,GAAqBP,EAEvBQ,EAAWC,EAAe,EAE1BC,EAAoBC,EAAS,IAAM,eAAAC,EAAAJ,EAAS,QAAT,YAAAI,EAAgB,eAAeV,GAAA,YAAAA,EAAS,OAAK,EAErEW,EAAS,CACxB,OAAQC,GAAQ,CACVA,EAAK,eAAiB,OAAO,KAAKA,EAAK,aAAa,EAAE,SACxDN,EAAS,MAAQM,EAAK,cACTA,IAAK,cAAc,KAAK,EAClBA,IAAK,cAAc,OAAO,EAClCC,EAAA,IAGT,CAACD,EAAK,eAAiB,OAAO,KAAKA,EAAK,aAAa,EAAE,SAAW,IACxDnB,EAAA,gBAAiBF,EAAM,IAAI,CAE3C,EACA,MAAOX,EACP,UAAW,CAAE,KAAMW,EAAM,IAAK,CAC/B,GAEQ,SAAAuB,EAAaC,EAAkCC,EAAqB,aAC3EX,EAAiB,CAAE,UAAW,GAAO,YAAaU,EAAM,OAAQ,EAChE,MAAME,EAAwB,CAAC,EAE3BjB,GAAWA,EAAQ,UAAUU,EAAAJ,EAAS,QAAT,YAAAI,EAAgB,aACrCO,EAAA,eAAgBC,EAAAZ,EAAS,QAAT,YAAAY,EAAgB,MAChCD,EAAA,QAASE,EAAAb,EAAS,QAAT,YAAAa,EAAgB,OACnCF,EAAU,UAAY,GACZA,EAAA,aAAeD,GAAgB,EAC/BC,EAAA,SAAUG,EAAAd,EAAS,QAAT,YAAAc,EAAgB,YAC3BnB,GAAgBe,IAAUf,EAAa,OAChDgB,EAAU,UAAY,GACtBA,EAAU,aAAeD,GAErBb,IACQc,EAAA,UAAY,CAACd,EAAU,OAIrCc,EAAU,OAAS,YACnBZ,EAAiBY,CAAS","names":["audioPlaylistQuery","gql","__default__","params","villusClient","resolve","reject","err","AudioTags","defineAsyncComponent","__vitePreload","props","__props","handleError","useHandleError","setMetaDescription","setMetaTitle","useMetaData","store","useAudioStore","audioId","currentTrack","isInitial","isPlaying","storeToRefs","updateAudioState","playlist","ref","isCurrentPlaylist","computed","_a","useQuery","data","dataLoaded","prepareAudio","event","index","audioData","_b","_c","_d"],"ignoreList":[],"sources":["../../src/queries/GetAudioPlaylist.js","../../src/components/audio/AudioPlaylist.vue"],"sourcesContent":["import gql from 'graphql-tag';\n\nexport const audioPlaylistQuery = gql`\n  query ($slug: ID!) {\n    audioPlaylist(id: $slug, idType: SLUG) {\n      content\n      databaseId\n      duration\n      excerpt\n      featuredImage {\n        node {\n          altText\n          description\n          mediaDetails {\n            height\n            width\n          }\n          sourceUrl\n        }\n      }\n      imageSrcset\n      scCreatedAt\n      tags {\n        nodes {\n          name\n          slug\n        }\n      }\n      title\n      tracks {\n        content\n        duration\n        featuredImage {\n          altText\n          sourceUrl\n        }\n        imageSrcset\n        fileUrl\n        scApiUrl\n        slug\n        title\n        trackId\n      }\n      __typename\n    }\n  }\n`;\n","<template>\n  <div v-if=\"playlist && Object.keys(playlist).length\" :class=\"[$style.playlist, 'container']\">\n    <AudioHeader :audio-data=\"playlist\" :class=\"$style.header\"></AudioHeader>\n    <div class=\"space-12-16-above\">\n      <ol :class=\"$style.audioTracks\">\n        <li\n          v-for=\"(track, index) in playlist.tracks\"\n          :key=\"index\"\n          :class=\"{\n            active: currentTrack === index && (isPlaying || !isInitial) && isCurrentPlaylist,\n            [$style.first]: index === 0,\n          }\"\n        >\n          <AudioPlaylistListItem\n            :id=\"playlist.databaseId\"\n            :duration=\"track.duration\"\n            :index=\"index\"\n            :title=\"track.title\"\n            @audio-action=\"(evt) => prepareAudio(evt, index)\"\n          ></AudioPlaylistListItem>\n        </li>\n      </ol>\n    </div>\n    <ProcessContent\n      v-if=\"playlist && playlist.content\"\n      class=\"space-12-16-above\"\n      :content=\"playlist.content\"\n      wrapper=\"section\"\n    ></ProcessContent>\n    <AudioTags\n      v-if=\"playlist && playlist.tags.nodes.length\"\n      :tags=\"playlist.tags.nodes\"\n    ></AudioTags>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { AudioData } from '@/types/audio.interface';\nimport AudioHeader from '@/components/audio/AudioHeader.vue';\nimport AudioPlaylistListItem from '@/components/audio/AudioPlaylistListItem.vue';\nimport { audioPlaylistQuery } from '@/queries/GetAudioPlaylist';\nimport { AudioState } from '@/types/audio.store.interface';\nimport { computed, defineAsyncComponent, ref } from 'vue';\nimport { dataLoaded, useHandleError, useMetaData } from '@/composables/Common.js';\nimport ProcessContent from '@/components/common/ProcessContent.vue';\nimport { storeToRefs } from 'pinia';\nimport { useAudioStore } from '@/stores/audioStore';\nimport { useQuery } from 'villus';\n\nconst AudioTags = defineAsyncComponent(() => import('@/components/audio/AudioTags.vue'));\n\nconst props = defineProps<{\n  slug: string;\n}>();\n\nconst { handleError } = useHandleError();\nconst { setMetaDescription, setMetaTitle } = useMetaData();\n\nconst store = useAudioStore();\nconst { audioId, currentTrack, isInitial, isPlaying } = storeToRefs(store);\nconst { updateAudioState } = store;\n\nconst playlist = ref<AudioData>();\n\nconst isCurrentPlaylist = computed(() => playlist.value?.databaseId === audioId?.value);\n\nconst { data } = useQuery({\n  onData: data => {\n    if (data.audioPlaylist && Object.keys(data.audioPlaylist).length) {\n      playlist.value = data.audioPlaylist;\n      setMetaTitle(data.audioPlaylist.title);\n      setMetaDescription(data.audioPlaylist.excerpt);\n      dataLoaded();\n    }\n\n    if (!data.audioPlaylist || Object.keys(data.audioPlaylist).length === 0) {\n      handleError('AudioPlaylist', props.slug);\n    }\n  },\n  query: audioPlaylistQuery,\n  variables: { slug: props.slug },\n});\n\nfunction prepareAudio(event: PointerEvent | MouseEvent, index: number): void {\n  updateAudioState({ isInitial: false, lastFocused: event.target });\n  const audioData: AudioState = {};\n\n  if (audioId && audioId.value !== playlist.value?.databaseId) {\n    audioData.playlistTitle = playlist.value?.title;\n    audioData.tracks = playlist.value?.tracks;\n    audioData.isPlaying = true;\n    audioData.currentTrack = index ? index : 0;\n    audioData.audioId = playlist.value?.databaseId;\n  } else if (currentTrack && index !== currentTrack.value) {\n    audioData.isPlaying = true;\n    audioData.currentTrack = index;\n  } else {\n    if (isPlaying) {\n      audioData.isPlaying = !isPlaying.value;\n    }\n  }\n\n  audioData.source = 'permalink';\n  updateAudioState(audioData);\n}\n</script>\n\n<script lang=\"ts\">\nexport default {\n  beforeRoute(params, villusClient) {\n    return new Promise<void>((resolve, reject) => {\n      villusClient\n        .executeQuery({\n          query: audioPlaylistQuery,\n          variables: {\n            slug: params.slug,\n          },\n        })\n        .then(() => resolve())\n        .catch((err) => reject(err));\n    });\n  },\n};\n</script>\n\n<style lang=\"scss\" module>\n.audio-tracks {\n  @include audio-playlist;\n}\n\n@media (min-width: $break-point) {\n  .playlist {\n    @include grid;\n\n    > * {\n      grid-column: 1 / span 8;\n    }\n\n    .discover-more {\n      grid-column: 1 / span 8;\n    }\n\n    .header {\n      grid-column: span 12;\n    }\n  }\n}\n</style>\n"],"file":"assets/AudioPlaylist-y7D3PTSO.js"}