{"version":3,"file":"TipsAndResourcesVideo-CWTUpBxU.js","sources":["../../../app/javascript/modules/growthmentor/dashboard/components/DashboardCarousel.vue","../../../app/javascript/shared/composables/useWistiaScriptLoader.js","../../../app/javascript/shared/components/TipsAndResourcesVideo.vue"],"sourcesContent":["<template>\n  <Card padding-class=\"tw-p-4\">\n    <div class=\"tw-flex tw-justify-between\">\n      <div class=\"tw-text-xs tw-font-semibold tw-uppercase tw-text-neutral-700\">\n        {{ header }}\n      </div>\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <InertiaLink\n          v-if=\"viewAllLink\"\n          :href=\"viewAllLink\"\n          class=\"tw-text-xs tw-text-neutral-500 tw-transition-colors hover:tw-text-neutral-700\"\n        >\n          View all\n        </InertiaLink>\n        <button\n          @click=\"previous\"\n          class=\"tw--m-1 tw-rounded-md tw-p-1 tw-transition-colors hover:tw-bg-neutral-50 disabled:tw-cursor-not-allowed disabled:tw-text-neutral-500 hover:disabled:tw-bg-white\"\n          :disabled=\"!hasPreviousIndex\"\n        >\n          <BaseIcon name=\"arrow-sm-left\" class=\"tw-h-4 tw-w-4\" />\n        </button>\n        <button\n          @click=\"next\"\n          class=\"tw--m-1 tw-rounded-md tw-p-1 tw-transition-colors hover:tw-bg-neutral-50 disabled:tw-cursor-not-allowed disabled:tw-text-neutral-500 hover:disabled:tw-bg-white\"\n          :disabled=\"!hasNextIndex\"\n        >\n          <BaseIcon name=\"arrow-sm-right\" class=\"tw-h-4 tw-w-4\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"tw-mt-4\">\n      <BaseCarousel\n        :breakpoints=\"{ 1: { slidesPerView: 1 } }\"\n        :slides-data=\"elements\"\n        :is-navigation-enabled=\"false\"\n        :current-slide-index=\"currentIndex\"\n      >\n        <template #slide=\"{ slideData }\">\n          <slot :element=\"slideData\" />\n        </template>\n      </BaseCarousel>\n    </div>\n  </Card>\n</template>\n\n<script setup lang=\"ts\">\nimport BaseIcon from '@/shared/components/BaseIcon.vue'\nimport Card from '@/shared/components/Card.vue'\nimport { computed, ref } from 'vue'\nimport BaseCarousel from '@/shared/components/BaseCarousel.vue'\n\nconst props = defineProps<{\n  header: string\n  elements: any[]\n  viewAllLink?: string\n}>()\n\nconst currentIndex = ref(0)\nconst maxIndex = computed(() => props.elements.length - 1)\nconst hasNextIndex = computed(() => currentIndex.value < maxIndex.value)\nconst hasPreviousIndex = computed(() => currentIndex.value > 0)\n\nconst next = () => {\n  if (!hasNextIndex.value) return\n  currentIndex.value++\n}\n\nconst previous = () => {\n  if (!hasPreviousIndex.value) return\n  currentIndex.value--\n}\n</script>\n","import { onMounted } from 'vue'\n\nexport const useWistiaScriptLoader = () => {\n  const loadWistiaScript = (url) => {\n    if (isWistiaScriptAlreadyLoaded(url)) return\n    const wistiaPlayerScript = document.createElement('script')\n    wistiaPlayerScript.setAttribute('src', url)\n    wistiaPlayerScript.setAttribute('async', 'true')\n    document.head.appendChild(wistiaPlayerScript)\n  }\n  const isWistiaScriptAlreadyLoaded = (url) => {\n    const wistiaPlayerScript = document.querySelectorAll(`[src=\"${url}\"]`)\n    return wistiaPlayerScript.length > 0\n  }\n  const loadWistiaVideoScript = (videoId) => {\n    const url = `https://fast.wistia.com/embed/medias/${videoId}.jsonp`\n    if (isWistiaScriptAlreadyLoaded(url)) return\n    loadWistiaScript(url)\n  }\n\n  onMounted(() => {\n    loadWistiaScript('https://fast.wistia.com/assets/external/E-v1.js')\n  })\n\n  return {\n    loadWistiaVideoScript,\n  }\n}\n","<template>\n  <div\n    class=\"tw-block tw-h-full tw-w-full tw-text-left\"\n    test_id=\"tips-and-resources-videos\"\n    :class=\"[\n      wistiaId\n        ? `wistia_embed wistia_async_${wistiaId} popover=true popoverAnimateThumbnail=true popoverContent=link`\n        : '',\n    ]\"\n    @click=\"handleVideoClick\"\n  >\n    <div\n      class=\"tw-flex tw-h-full tw-cursor-pointer tw-items-center tw-space-x-3 tw-rounded-xl tw-p-1\"\n    >\n      <PlayIcon class=\"tw-h-4 tw-w-4 tw-shrink-0\" />\n      <div class=\"tw-grow tw-font-semibold\">\n        {{ title }}\n      </div>\n    </div>\n\n    <BaseModal\n      v-if=\"youtubeId\"\n      :name=\"modalName\"\n      width-class=\"tw-max-w-[960px]\"\n    >\n      <div>\n        <iframe\n          class=\"tw-aspect-video tw-w-full tw-rounded-xl\"\n          :src=\"`https://www.youtube.com/embed/${youtubeId}`\"\n          title=\"YouTube video player\"\n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n          allowfullscreen\n        />\n      </div>\n    </BaseModal>\n  </div>\n</template>\n\n<script setup>\nimport PlayIcon from '@/assets/images/icons/play.svg'\nimport { useWistiaScriptLoader } from '@/shared/composables/useWistiaScriptLoader.js'\nimport { computed, onMounted } from 'vue'\nimport { useModals } from '@/shared/composables/useModals.js'\nimport BaseModal from '@/shared/components/BaseModal.vue'\n\nconst props = defineProps({\n  id: {\n    type: Number,\n    required: true,\n  },\n  wistiaId: {\n    type: String,\n    default: '',\n  },\n  youtubeId: {\n    type: String,\n    default: '',\n  },\n  title: {\n    type: String,\n    required: true,\n  },\n  trackingObject: {\n    type: Object,\n    required: true,\n  },\n})\n\nconst { openModal } = useModals()\nconst { loadWistiaVideoScript } = useWistiaScriptLoader()\n\nconst modalName = computed(() => {\n  return `tips-and-resources-video-${props.id}`\n})\n\nconst trackClickedVideo = () => {\n  if (!Object.keys(props.trackingObject).includes('name')) {\n    return new Error('Tracking object must have a name property')\n  }\n  window.segmentAnalytics.track(props.trackingObject.name, {\n    user_type: window.segmentAnalytics.userType(),\n    video_title: props.title,\n    ...props.trackingObject.props,\n  })\n}\n\nconst handleVideoClick = () => {\n  trackClickedVideo()\n\n  if (props.youtubeId) {\n    openModal(modalName.value)\n  }\n}\n\nonMounted(() => {\n  if (props.wistiaId) {\n    loadWistiaVideoScript(props.wistiaId)\n  }\n})\n</script>\n\n<style>\n.wistia_click_to_play {\n  width: 100% !important;\n  height: 100% !important;\n}\n</style>\n"],"names":["props","__props","currentIndex","ref","maxIndex","computed","hasNextIndex","hasPreviousIndex","next","previous","useWistiaScriptLoader","loadWistiaScript","url","isWistiaScriptAlreadyLoaded","wistiaPlayerScript","loadWistiaVideoScript","videoId","onMounted","openModal","useModals","modalName","trackClickedVideo","handleVideoClick"],"mappings":"sjBAmDA,MAAMA,EAAQC,EAMRC,EAAeC,EAAI,CAAC,EACpBC,EAAWC,EAAS,IAAML,EAAM,SAAS,OAAS,CAAC,EACnDM,EAAeD,EAAS,IAAMH,EAAa,MAAQE,EAAS,KAAK,EACjEG,EAAmBF,EAAS,IAAMH,EAAa,MAAQ,CAAC,EAExDM,EAAO,IAAM,CACZF,EAAa,OACLJ,EAAA,OAAA,EAGTO,EAAW,IAAM,CAChBF,EAAiB,OACTL,EAAA,OAAA,gnCCnEFQ,EAAwB,IAAM,CACzC,MAAMC,EAAoBC,GAAQ,CAChC,GAAIC,EAA4BD,CAAG,EAAG,OACtC,MAAME,EAAqB,SAAS,cAAc,QAAQ,EAC1DA,EAAmB,aAAa,MAAOF,CAAG,EAC1CE,EAAmB,aAAa,QAAS,MAAM,EAC/C,SAAS,KAAK,YAAYA,CAAkB,CAC7C,EACKD,EAA+BD,GACR,SAAS,iBAAiB,SAASA,CAAG,IAAI,EAC3C,OAAS,EAE/BG,EAAyBC,GAAY,CACzC,MAAMJ,EAAM,wCAAwCI,CAAO,SACvDH,EAA4BD,CAAG,GACnCD,EAAiBC,CAAG,CACrB,EAED,OAAAK,EAAU,IAAM,CACdN,EAAiB,iDAAiD,CACtE,CAAG,EAEM,CACL,sBAAAI,CACD,CACH,iXCkBA,MAAMf,EAAQC,EAuBR,CAAE,UAAAiB,CAAW,EAAGC,EAAW,EAC3B,CAAE,sBAAAJ,CAAuB,EAAGL,EAAuB,EAEnDU,EAAYf,EAAS,IAClB,4BAA4BL,EAAM,EAAE,EAC5C,EAEKqB,EAAoB,IAAM,CAC9B,GAAI,CAAC,OAAO,KAAKrB,EAAM,cAAc,EAAE,SAAS,MAAM,EACpD,OAAO,IAAI,MAAM,2CAA2C,EAE9D,OAAO,iBAAiB,MAAMA,EAAM,eAAe,KAAM,CACvD,UAAW,OAAO,iBAAiB,SAAU,EAC7C,YAAaA,EAAM,MACnB,GAAGA,EAAM,eAAe,KAC5B,CAAG,CACH,EAEMsB,EAAmB,IAAM,CAC7BD,EAAmB,EAEfrB,EAAM,WACRkB,EAAUE,EAAU,KAAK,CAE7B,EAEA,OAAAH,EAAU,IAAM,CACVjB,EAAM,UACRe,EAAsBf,EAAM,QAAQ,CAExC,CAAC"}