{"version":3,"file":"AudioGrid-D75_Qb3k.js","sources":["../../src/components/audio/AudioGrid.vue"],"sourcesContent":["<template>\n  <div :class=\"[$style.container, 'container']\">\n    <nav v-if=\"!tag\" class=\"nav-bar\">\n      <ul>\n        <li :class=\"[{ active: selected === 'filter' }, 'nav-subtypes']\">\n          <button\n            id=\"filter-button\"\n            :class=\"['button-filter', selected === 'filter' ? 'up' : 'down']\"\n            aria-controls=\"filter\"\n            :aria-expanded=\"selected === 'filter'\"\n            @click.stop.prevent=\"toggle('filter')\"\n          >\n            Filters\n          </button>\n          <ul\n            id=\"filter\"\n            ref=\"filtersDropdown\"\n            class=\"nav-items\"\n            role=\"menu\"\n            aria-labelledby=\"filter-button\"\n          >\n            <li :class=\"{ pressed: !type }\">\n              <router-link\n                :to=\"{ name: 'AudioSection' }\"\n                :ga4-event=\"\n                  JSON.stringify({\n                    filter_location: 'audio_section',\n                    filter_type: 'audio',\n                    filter_value: 'all audio',\n                    gtm_tag: 'filter',\n                  })\n                \"\n              >\n                All Audio\n              </router-link>\n            </li>\n            <li :class=\"{ pressed: type === 'track' }\">\n              <router-link\n                :to=\"{\n                  name: 'AudioTracks',\n                  params: {\n                    type: 'track',\n                  },\n                }\"\n                :ga4-event=\"\n                  JSON.stringify({\n                    filter_location: 'audio_section',\n                    filter_type: 'audio',\n                    filter_value: 'tracks',\n                    gtm_tag: 'filter',\n                  })\n                \"\n              >\n                Tracks\n              </router-link>\n            </li>\n            <li :class=\"{ pressed: type === 'playlist' }\">\n              <router-link\n                :to=\"{\n                  name: 'AudioPlaylists',\n                  params: {\n                    type: 'playlist',\n                  },\n                }\"\n                :ga4-event=\"\n                  JSON.stringify({\n                    filter_location: 'audio_section',\n                    filter_type: 'audio',\n                    filter_value: 'playlists',\n                    gtm_tag: 'filter',\n                  })\n                \"\n              >\n                Playlists\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </nav>\n    <header v-if=\"tag && audioData.length\">\n      <BackLink component=\"AudioGrid\" group=\"audio\" label=\"Audio\" name=\"AudioSection\"></BackLink>\n      <h1 class=\"space-24-32-above\">{{ `Audio Tagged as ${getTagName}` }}</h1>\n    </header>\n    <header v-else class=\"unspaced\">\n      <h1>{{ getTitle }}</h1>\n    </header>\n    <ul :class=\"[$style.audioItems, 'space-24-32-above']\">\n      <li v-for=\"(audio, index) in audioData\" :key=\"index\" class=\"space-48-64-above\">\n        <router-link\n          :to=\"{\n            name: getRouteName(audio.__typename),\n            params: { slug: audio.slug },\n          }\"\n          :ga4-event=\"\n            JSON.stringify({\n              click_type: `audio_${audio.__typename.split('_')[1]}`,\n              component: 'AudioGrid',\n              content_group: 'audio',\n              gtm_tag: 'link',\n              link_text: `${audio.title}`,\n              link_url: `${audio.slug}`,\n            })\n          \"\n        >\n          <picture :class=\"[$style.audioCover, 'aspect-container']\">\n            <img\n              v-if=\"audio.featuredImage\"\n              :alt=\"audio.featuredImage.node.altText\"\n              :src=\"proxySource(audio.featuredImage.node.sourceUrl, getImageSize)\"\n              :srcset=\"audio.imageSrcset\"\n              class=\"aspect-image\"\n              loading=\"lazy\"\n              sizes=\"(min-size: 960px) 470px, 100vw\"\n            />\n          </picture>\n          <h2 class=\"heading-4\" v-html=\"audio.title\"></h2>\n        </router-link>\n        <div>\n          <span\n            v-if=\"audio.__typename.split('_')[1] === 'playlist' && audio.tracks\"\n            class=\"subtitle-2\"\n          >\n            {{ audio.tracks.length }} {{ audio.tracks.length > 1 ? 'tracks' : 'track' }} |\n            <time :datetime=\"formatTimeDuration(audio.duration)\">\n              {{ formatDuration(audio.duration) }}\n            </time>\n          </span>\n          <time v-else :datetime=\"formatTimeDuration(audio.duration)\" class=\"subtitle-2\">\n            {{ formatDuration(audio.duration) }}\n          </time>\n        </div>\n      </li>\n    </ul>\n    <GuggenPagination\n      :current-page=\"page\"\n      :has-bootstrap=\"total > 0\"\n      :bootstrap-total=\"total\"\n      :per-page=\"limit\"\n      :sub-type=\"getSubType\"\n      :sub-type-value=\"tag\"\n      :total-page-count=\"totalPageCount\"\n      post-type=\"audio\"\n    ></GuggenPagination>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { AudioData } from '@/types/audio.interface';\nimport BackLink from '@/components/common/BackLink.vue';\nimport { BootStrap } from '@/types/global.interface';\nimport { changeCase, formatDuration, formatTimeDuration } from '@/utils';\nimport { computed, inject, ref } from 'vue';\nimport GuggenPagination from '@/components/GuggenPagination.vue';\nimport { storeToRefs } from 'pinia';\nimport {\n  useFilterInteractions,\n  useImageProxy,\n  useMetaData,\n  useScreenSize,\n} from '@/composables/Common.js';\nimport { useMainStore } from '@/stores/mainStore.js';\n\nconst props = withDefaults(\n  defineProps<{\n    audioData: Array<AudioData>;\n    page: number;\n    tag: string;\n    tagName?: string;\n    totalPageCount: number;\n    type?: string;\n  }>(),\n  {\n    tag: '',\n    type: '',\n  }\n);\n\nconst bootstrap = inject<BootStrap>('bootstrap');\n\nconst filtersDropdown = ref(null);\n\nconst { isMobile } = useScreenSize();\nconst { proxySource } = useImageProxy();\nconst { setMetaTitle } = useMetaData();\nconst store = useMainStore();\nconst { useBootstrap } = storeToRefs(store);\n\nconst limit = 27;\nconst selected = ref('');\nconst total = ref(0);\n\nconst { selectNav } = useFilterInteractions(selected);\n\nconst getImageSize = computed(() => (isMobile ? 400 : 270));\nconst getSubType = computed(() => {\n  if (props.type) {\n    return `audio_${props.type}`;\n  }\n\n  if (props.tag) {\n    return 'tag';\n  }\n\n  return 'all_audio';\n});\nconst getTagName = computed(() => {\n  setMetaTitle(`Audio: ${props.tagName}`);\n\n  return changeCase(props.tagName);\n});\nconst getTitle = computed(() => {\n  const title = 'Audio';\n\n  if (props.type === 'track') {\n    return `${title} Tracks`;\n  }\n\n  if (props.type === 'playlist') {\n    return `${title} Playlists`;\n  }\n\n  return title;\n});\n\nif (useBootstrap.value && bootstrap) {\n  total.value = bootstrap.initial.main.pagination.total_posts;\n}\n\nfunction getRouteName(type: string): string {\n  const parts = type.split('_');\n\n  return parts[0] + parts[1].charAt(0).toUpperCase() + parts[1].slice(1);\n}\n\nfunction toggle(type: string): void {\n  selectNav(type, [filtersDropdown.value]);\n}\n</script>\n\n<style lang=\"scss\">\n@use '@/styles/navigation.module.scss' as *;\n</style>\n\n<style lang=\"scss\" module>\n.audio-items {\n  display: block;\n  margin-left: 0;\n  padding: 0;\n\n  a {\n    display: block;\n    text-decoration: none;\n\n    div,\n    h2 {\n      // Safari hack https://stackoverflow.com/a/61379828\n      outline: 2px solid #0000;\n      outline-offset: 2px;\n    }\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      background-color: transparent;\n      color: $white;\n\n      div,\n      h2 {\n        @include focus-outline;\n      }\n\n      h2 {\n        background-color: $black;\n        color: $white;\n      }\n    }\n  }\n\n  li {\n    list-style: none;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n  }\n}\n\n.break {\n  word-break: break-all;\n}\n\n.filters {\n  a {\n    margin-right: 1rem;\n    padding: 0.5rem px-to-rem(23);\n  }\n}\n\n@media (min-width: $break-point) {\n  .audio-items {\n    @include grid;\n    grid-row-gap: 3rem;\n    margin-top: 0;\n\n    li {\n      border-bottom: initial;\n      grid-column: span 4;\n      margin-top: initial;\n      padding-bottom: initial;\n    }\n  }\n\n  .container {\n    @include grid;\n\n    > * {\n      grid-column: span 12;\n    }\n  }\n\n  .filters {\n    a {\n      padding: 1rem 2.875rem 1rem 3rem;\n    }\n  }\n}\n</style>\n"],"names":["limit","props","__props","bootstrap","inject","filtersDropdown","ref","isMobile","useScreenSize","proxySource","useImageProxy","setMetaTitle","useMetaData","store","useMainStore","useBootstrap","storeToRefs","selected","total","selectNav","useFilterInteractions","getImageSize","computed","getSubType","getTagName","changeCase","getTitle","title","getRouteName","type","parts","toggle"],"mappings":"6lBA4LMA,GAAQ,kIAzBd,MAAMC,EAAQC,EAeRC,EAAYC,EAAkB,WAAW,EAEzCC,EAAkBC,EAAI,IAAI,EAE1B,CAAE,SAAAC,CAAS,EAAIC,EAAc,EAC7B,CAAE,YAAAC,CAAY,EAAIC,EAAc,EAChC,CAAE,aAAAC,CAAa,EAAIC,EAAY,EAC/BC,EAAQC,EAAa,EACrB,CAAE,aAAAC,CAAA,EAAiBC,EAAYH,CAAK,EAGpCI,EAAWX,EAAI,EAAE,EACjBY,EAAQZ,EAAI,CAAC,EAEb,CAAE,UAAAa,CAAA,EAAcC,EAAsBH,CAAQ,EAE9CI,EAAeC,EAAS,IAAOf,EAAW,IAAM,GAAI,EACpDgB,EAAaD,EAAS,IACtBrB,EAAM,KACD,SAASA,EAAM,IAAI,GAGxBA,EAAM,IACD,MAGF,WACR,EACKuB,EAAaF,EAAS,KACbX,EAAA,UAAUV,EAAM,OAAO,EAAE,EAE/BwB,EAAWxB,EAAM,OAAO,EAChC,EACKyB,EAAWJ,EAAS,IAAM,CAC9B,MAAMK,EAAQ,QAEV,OAAA1B,EAAM,OAAS,QACV,GAAG0B,CAAK,UAGb1B,EAAM,OAAS,WACV,GAAG0B,CAAK,aAGVA,CAAA,CACR,EAEGZ,EAAa,OAASZ,IACxBe,EAAM,MAAQf,EAAU,QAAQ,KAAK,WAAW,aAGlD,SAASyB,EAAaC,EAAsB,CACpC,MAAAC,EAAQD,EAAK,MAAM,GAAG,EAE5B,OAAOC,EAAM,CAAC,EAAIA,EAAM,CAAC,EAAE,OAAO,CAAC,EAAE,YAAgB,EAAAA,EAAM,CAAC,EAAE,MAAM,CAAC,CAAA,CAGvE,SAASC,EAAOF,EAAoB,CAClCV,EAAUU,EAAM,CAACxB,EAAgB,KAAK,CAAC,CAAA"}