{"version":3,"file":"VideoPost-BXqEIt0C.js","sources":["../../src/queries/GetVideoPost.js","../../src/components/video/VideoPost.vue"],"sourcesContent":["import gql from 'graphql-tag';\n\nexport const videoPostQuery = gql`\n  query ($slug: ID!) {\n    video(id: $slug, idType: SLUG) {\n      categories {\n        nodes {\n          name\n          slug\n        }\n      }\n      content\n      date\n      duration\n      embed\n      excerpt\n      pdf\n      tags {\n        nodes {\n          name\n          slug\n        }\n      }\n      title\n      transcript\n    }\n  }\n`;\n","<template>\n  <article\n    v-if=\"post && Object.keys(post).length\"\n    :class=\"[isMobile() ? 'space-0-above' : { grid: !isTablet() }, 'container']\"\n  >\n    <figure :class=\"[$style.video, 'aspect-container']\" v-html=\"post.embed\"></figure>\n    <header>\n      <nav>\n        <BackLink component=\"VideoPost\" group=\"video\" label=\"Video\" name=\"Video\"></BackLink>\n      </nav>\n      <h1 v-html=\"post.title\"></h1>\n      <time\n        :class=\"[$style.time, 'subtitle-2', 'space-0-above']\"\n        :datetime=\"formatTimeDuration(post.duration)\"\n        v-html=\"post.duration\"\n      ></time>\n      <time class=\"subtitle-2\" :datetime=\"post.date\" pubdate>{{ post.date }}</time>\n    </header>\n    <ProcessContent\n      v-if=\"post.content\"\n      ref=\"mainContent\"\n      :content=\"post.content\"\n      wrapper=\"section\"\n    ></ProcessContent>\n    <section v-if=\"post.pdf || post.transcript\" :class=\"[$style.transcript, 'space-48-64-above']\">\n      <h2 v-if=\"post.transcript\">Transcript</h2>\n      <p v-if=\"post.transcript\" v-html=\"post.transcript\"></p>\n      <a v-if=\"post.pdf\" :href=\"post.pdf\">Download Transcript (PDF)</a>\n    </section>\n    <p v-if=\"post.tags && post.tags.nodes.length\" class=\"info\">Tags:</p>\n    <ul v-if=\"post.tags && post.tags.nodes.length\" class=\"tags\">\n      <li v-for=\"(tag, index) in post.tags.nodes\" :key=\"index\">\n        <router-link\n          :to=\"{ name: 'VideoTaxonomy', params: { type: 'tag', slug: tag.slug } }\"\n          :class=\"{ 'tag-spacing': index < post.tags.nodes.length - 1 }\"\n        >\n          {{ tag.name }}\n        </router-link>\n      </li>\n    </ul>\n    <p v-if=\"post.categories && post.categories.nodes.length\" class=\"info\">Categories:</p>\n    <ul v-if=\"post.categories && post.categories.nodes.length\" class=\"tags\">\n      <li\n        v-for=\"(category, index) in post.categories.nodes\"\n        :key=\"index\"\n        :class=\"$style.taxonomyItem\"\n      >\n        <router-link\n          :class=\"{ 'tag-spacing': index < post.categories.nodes.length - 1 }\"\n          :to=\"{ name: 'VideoTaxonomy', params: { type: 'category', slug: category.slug } }\"\n        >\n          {{ category.name }}\n        </router-link>\n      </li>\n    </ul>\n  </article>\n</template>\n\n<script setup lang=\"ts\">\nimport BackLink from '@/components/common/BackLink.vue';\nimport { dataLoaded, useHandleError, useMetaData, useScreenSize } from '@/composables/Common.js';\nimport { formatTimeDuration } from '@/utils.js';\nimport ProcessContent from '@/components/common/ProcessContent.vue';\nimport { ref } from 'vue';\nimport { useQuery } from 'villus';\nimport { Video } from '@/types/video.interface';\nimport { videoPostQuery } from '@/queries/GetVideoPost';\n\nconst props = defineProps<{\n  postSlug: string;\n}>();\n\nconst { handleError } = useHandleError();\nconst { isMobile, isTablet } = useScreenSize();\nconst { setMetaDescription, setMetaTitle } = useMetaData();\n\nconst post = ref<Video>({});\n\nconst { data } = useQuery({\n  onData: (data) => {\n    if (data !== undefined && data.video && Object.keys(data.video).length) {\n      post.value = data.video;\n      setMetaTitle(data.video.title);\n      setMetaDescription(data.video.excerpt);\n      dataLoaded();\n    }\n\n    if (!data || !data.video || Object.keys(data.video).length === 0) {\n      handleError('VideoPost', props.postSlug);\n    }\n  },\n  query: videoPostQuery,\n  variables: { slug: props.postSlug },\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: videoPostQuery,\n          variables: {\n            slug: params.postSlug,\n          },\n        })\n        .then(() => resolve())\n        .catch((err) => reject(err));\n    });\n  },\n};\n</script>\n\n<style lang=\"scss\" module>\n.time {\n  display: inline-block;\n\n  &::after {\n    content: '|';\n    margin: 0 0.25rem;\n  }\n}\n\n.transcript {\n  a[href$='.pdf'][href$='.pdf'] {\n    margin-bottom: 0;\n    margin-top: 1rem;\n  }\n}\n\n.video {\n  @include space-0-above;\n\n  iframe {\n    height: 100%;\n    position: absolute;\n    width: 100%;\n  }\n}\n\n@media (min-width: $break-point) {\n  article {\n    > * {\n      grid-column: 1 / span 8;\n    }\n\n    nav,\n    .video {\n      grid-column: span 12;\n    }\n  }\n}\n</style>\n"],"names":["videoPostQuery","gql","__default__","params","villusClient","resolve","reject","err","props","__props","handleError","useHandleError","isMobile","isTablet","useScreenSize","setMetaDescription","setMetaTitle","useMetaData","post","ref","useQuery","data","dataLoaded"],"mappings":"ibAEO,MAAMA,EAAiBC;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,6MC+FfC,EAAA,CACb,YAAYC,EAAQC,EAAc,CAChC,OAAO,IAAI,QAAc,CAACC,EAASC,IAAW,CAC5CF,EACG,aAAa,CACZ,MAAOJ,EACP,UAAW,CACT,KAAMG,EAAO,QAAA,CACf,CACD,EACA,KAAK,IAAME,GAAS,EACpB,MAAOE,GAAQD,EAAOC,CAAG,CAAC,CAAA,CAC9B,CAAA,CAEL,4DA3CA,MAAMC,EAAQC,EAIR,CAAE,YAAAC,CAAY,EAAIC,EAAe,EACjC,CAAE,SAAAC,EAAU,SAAAC,CAAS,EAAIC,EAAc,EACvC,CAAE,mBAAAC,EAAoB,aAAAC,CAAa,EAAIC,EAAY,EAEnDC,EAAOC,EAAW,EAAE,EAET,OAAAC,EAAS,CACxB,OAASC,GAAS,CACZA,IAAS,QAAaA,EAAK,OAAS,OAAO,KAAKA,EAAK,KAAK,EAAE,SAC9DH,EAAK,MAAQG,EAAK,MACLA,EAAAA,EAAK,MAAM,KAAK,EACVA,EAAAA,EAAK,MAAM,OAAO,EAC1BC,EAAA,IAGT,CAACD,GAAQ,CAACA,EAAK,OAAS,OAAO,KAAKA,EAAK,KAAK,EAAE,SAAW,IACjDX,EAAA,YAAaF,EAAM,QAAQ,CAE3C,EACA,MAAOR,EACP,UAAW,CAAE,KAAMQ,EAAM,QAAS,CACnC,CAAA"}