{"version":3,"file":"js/718.88672849.js","mappings":"kSAcA,MAAMA,GAASC,EAAAA,EAAAA,MAETC,EAAiBA,KACrBF,EAAOG,KAAK,CAAEC,KAAM,4BAA6B,GAG7C,SAAEC,IAAaC,EAAAA,EAAAA,GAAiB,CACpCC,MAAO,GACPC,UAAW,QACXC,OAAQ,KACRC,KAAM,KACNC,aAAc,CAAE,mBAChBC,kBAAmB,MAClB,CACDC,UAAU,I,oMCzBNC,EAAc,EAEpB,I,mCCSA,MAAMd,GAASC,EAAAA,EAAAA,MAETC,EAAiBA,KACrBF,EAAOG,KAAK,CAAEC,KAAM,4BAA6B,GAG7C,SAAEC,IAAaC,EAAAA,EAAAA,GAAiB,CACpCC,MAAO,GACPC,UAAW,QACXO,eAAe,EACfN,OAAQ,KACRC,KAAM,KACNC,aAAc,CAAE,mBAChBC,kBAAmB,MAClB,CACDC,UAAU,I,uLC1BN,EAAc,EAEpB,I,+PCsBA,MAAMG,EAAQC,EAsBRC,GAASC,EAAAA,EAAAA,IAAI,IACbC,GAAUD,EAAAA,EAAAA,KAAI,GACdE,GAAgBF,EAAAA,EAAAA,KAAI,GAE1BG,eAAeC,UACPC,EAAAA,EAAIC,eAAeT,EAAMU,UAAWV,EAAMW,KAAMX,EAAMY,QAAQC,MAAMC,KAExEC,EAAAA,EAAAA,IAAIb,EAAQY,GAAKE,MAAMC,SAAW,KAClCF,EAAAA,EAAAA,IAAIX,GAAS,EAAM,IAClBc,OAAM,MACPH,EAAAA,EAAAA,IAAIV,GAAe,EAAM,GAE7B,C,2tBCvDA,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,I,gKCsEMc,EAAwB,uHACxBC,EAAuB,qH,8EAxB7B,MAAMpB,EAAQC,GAOR,WAAEoB,IAAeC,EAAAA,EAAAA,MACjB,UAAEC,IAAcC,EAAAA,EAAAA,KAEhBC,GAAWtB,EAAAA,EAAAA,MACXuB,GAAcvB,EAAAA,EAAAA,KAAI,GAClBwB,GAAWxB,EAAAA,EAAAA,KAAI,GAErBK,EAAAA,EAAIoB,gBAAgB,CAAEC,OAAQR,EAAW,iBAAkBS,SAAU9B,EAAMP,OAAQsC,iBAAkB,CAAE,QAAS,iBAAkB,UAC/HlB,MAAMC,KACLC,EAAAA,EAAAA,IAAIU,EAAUX,GAAKE,MAAMgB,SACzBjB,EAAAA,EAAAA,IAAIW,GAAa,EAAM,IACtBR,OAAM,MACPH,EAAAA,EAAAA,IAAIW,GAAa,IACjBX,EAAAA,EAAAA,IAAIY,GAAU,EAAK,IAMvB,MAAMM,GAAsBC,EAAAA,EAAAA,KAAS,IAAOX,EAAUY,MAAQhB,EAAwBC,IAEhFgB,EAAoBA,KACxBC,OAAOC,KAAK,4HAA6H,QAAQ,E,moCC9E7I,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,G","sources":["webpack://content/./src/components/article-widgets/LatestArticles.vue","webpack://content/./src/components/article-widgets/LatestArticles.vue?fd34","webpack://content/./src/components/article-widgets/EditorsChoice.vue","webpack://content/./src/components/article-widgets/EditorsChoice.vue?96eb","webpack://content/./src/components/video-widgets/YoutubeRssFeed.vue","webpack://content/./src/components/video-widgets/YoutubeRssFeed.vue?bb9f","webpack://content/./src/views/landing-pages/ChannelFireball.vue","webpack://content/./src/views/landing-pages/ChannelFireball.vue?2813"],"sourcesContent":["<template>\n  <full-art-article-grid\n    :articles=\"articles\"\n    title=\"Latest ChannelFireball Articles\"\n    button-text=\"See All ChannelFireball Articles\"\n    @clicked=\"allCFBArticles\"/>\n</template>\n\n<script setup>\nimport { useRouter } from 'vue-router';\nimport { useFetchArticles } from '@/use/fetcher/useFetchArticles';\n\nimport { FullArtArticleGrid } from '@tcgplayer/martech-components';\n\nconst router = useRouter();\n\nconst allCFBArticles = () => {\n  router.push({ name: 'ChannelFireball Articles' });\n};\n\nconst { articles } = useFetchArticles({\n  count: 10,\n  verticals: 'magic',\n  series: null,\n  tags: null,\n  internalTags: [ 'channelfireball' ],\n  requiredVerticals: null,\n}, {\n  skipPool: true,\n});\n</script>","import script from \"./LatestArticles.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./LatestArticles.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","<template>\n  <full-art-article-grid\n    :articles=\"articles\"\n    title=\"CFB Editor's Picks\"\n    button-text=\"See All ChannelFireball Articles\"\n    @clicked=\"allCFBArticles\"/>\n</template>\n\n<script setup>\nimport { useRouter } from 'vue-router';\n\nimport { useFetchArticles } from '@/use/fetcher/useFetchArticles';\nimport { FullArtArticleGrid } from '@tcgplayer/martech-components';\n\nconst router = useRouter();\n\nconst allCFBArticles = () => {\n  router.push({ name: 'ChannelFireball Articles' });\n};\n\nconst { articles } = useFetchArticles({\n  count: 10,\n  verticals: 'magic',\n  editorsChoice: true,\n  series: null,\n  tags: null,\n  internalTags: [ 'channelfireball' ],\n  requiredVerticals: null,\n}, {\n  skipPool: true,\n});\n</script>","import script from \"./EditorsChoice.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./EditorsChoice.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","<template>\n  <delay-load :data-testid=\"componentID()\" @visible=\"onVisible\">\n    <div v-if=\"showComponent\" class=\"video-grid\" :style=\"{ 'grid-template-columns': `repeat(${gridColumns}, 1fr)` }\">\n      <!--Placeholder-->\n      <template v-if=\"loading\">\n        <div v-for=\"(p, index) in rows\" :key=\"index\" class=\"grid-item placeholder\">\n          <full-art-placeholder :include-text=\"false\"/>\n        </div>\n      </template>\n      <!--Content Card-->\n      <template v-else>\n        <div v-for=\"video in videos.slice(0, rows)\" :key=\"video.videoID\" class=\"grid-item\">\n          <video-card :data=\"video\" new-window url-target=\"_blank\"/>\n        </div>\n      </template>\n    </div>\n  </delay-load>\n</template>\n\n<script setup>\nimport Api from '@/api/api';\nimport DelayLoad from '@/components/DelayLoad.vue';\nimport FullArtPlaceholder from '@/components/placeholder-components/FullArtPlaceholder.vue';\nimport { VideoCard } from '@tcgplayer/martech-components';\nimport { set } from '@vueuse/core';\nimport { ref } from 'vue';\n\nconst props = defineProps({\n  channelId: {\n    type: String,\n    required: true,\n  },\n  gridColumns: {\n    type: Number,\n    required: false,\n    default: 4,\n  },\n  rows: {\n    type: Number,\n    required: false,\n    default: 8,\n  },\n  offset: {\n    type: Number,\n    required: false,\n    default: 0,\n  },\n});\n\nconst videos = ref([]);\nconst loading = ref(true);\nconst showComponent = ref(true);\n\nasync function onVisible() {\n  await Api.youtubeRssFeed(props.channelId, props.rows, props.offset).then((res) => {\n    // Sort videos from newest published date to oldest\n    set(videos, res?.data?.results || []);\n    set(loading, false);\n  }).catch(() => {\n    set(showComponent, false);\n  });\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.video-grid {\n  display: flex;\n  flex-direction: column;\n  grid-gap: $martech-spacer-4;\n\n  @include breakpoint(768) {\n    display: grid;\n  }\n\n  .placeholder {\n    :deep(.delay-wrapper) {\n      height: 100%;\n    }\n\n    min-height: 250px;\n  }\n\n  :deep(.video-label) {\n    color: $martech-white;\n  }\n}\n</style>","import script from \"./YoutubeRssFeed.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./YoutubeRssFeed.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./YoutubeRssFeed.vue?vue&type=style&index=0&id=898851f2&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-898851f2\"]])\n\nexport default __exports__","<template>\n  <div class=\"page-wrapper\">\n    <hero\n      v-if=\"!hideHero\"\n      :loading=\"heroLoading\"\n      :data=\"heroData\"\n      hide-vertical-label\n      hide-button\n      :has-h1=\"false\"\n      :full-width=\"false\"/>\n    <div class=\"container\">\n      <div class=\"marketing-blob\">\n        <p>The best strategy from some of the best players in the world.</p>\n      </div>\n    </div>\n    <div class=\"content-body\">\n      <div class=\"container\">\n        <latest-articles/>\n      </div>\n      <div class=\"video-grid\">\n        <div class=\"container\">\n          <h2 class=\"martech-sub-heading martech-semi-condensed martech-text-uppercase martech-text-semibold\">\n            Latest ChannelFireball Videos\n          </h2>\n          <youtube-rss-feed channel-id=\"UCVmqfvWsKeFaMGY68CbcVVQ\"/>\n        </div>\n      </div>\n      <div class=\"container\">\n        <editors-choice/>\n        <div class=\"sponsored-block\" :style=\"{ 'background-image': 'url(' + sponsoredBlockImage + ')' }\">\n          <h2 class=\"martech-sub-heading martech-text-semibold\">\n            Introducing Team ChannelFireball Ultimate Guard\n          </h2>\n          <base-button\n            btn-style=\"martech-secondary\"\n            @clicked=\"sponsoredBlockCta\">\n            Read More Here!\n          </base-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nimport { set } from '@vueuse/core';\nimport Api from '@/api/api';\n\nimport { Hero, BaseButton, useDeviceType } from '@tcgplayer/martech-components';\nimport LatestArticles from '@/components/article-widgets/LatestArticles.vue';\nimport EditorsChoice from '@/components/article-widgets/EditorsChoice.vue';\nimport YoutubeRssFeed from '@/components/video-widgets/YoutubeRssFeed.vue';\nimport useSiteConfig from '@/use/useSiteConfig';\n\nconst props = defineProps({\n  series: {\n    type: String,\n    required: true,\n  },\n});\n\nconst { siteConfig } = useSiteConfig();\nconst { isDesktop } = useDeviceType();\n\nconst heroData = ref();\nconst heroLoading = ref(true);\nconst hideHero = ref(false);\n\nApi.getVerticalHero({ domain: siteConfig('global.domain'), vertical: props.series, excludeVerticals: [ 'Magic', 'TCGplayer Edge', 'Edge' ] })\n  .then((res) => {\n    set(heroData, res?.data?.result);\n    set(heroLoading, false);\n  }).catch(() => {\n    set(heroLoading, false);\n    set(hideHero, true);\n  });\n\nconst desktopSponsoredImage = 'https://mktg-assets.tcgplayer.com/content/channel-fireball/site-images/CFBUltimateGuard-ad_desktop_1400x300%402x.jpg';\nconst mobileSponsoredImage = 'https://mktg-assets.tcgplayer.com/content/channel-fireball/site-images/CFBUltimateGuard-ad_mobile_445x500%402x.jpg';\n\nconst sponsoredBlockImage = computed(() => (isDesktop.value ? desktopSponsoredImage : mobileSponsoredImage));\n\nconst sponsoredBlockCta = () => {\n  window.open('https://infinite.tcgplayer.com/article/Introducing-Team-CFB-Ultimate-Guard-for-2024/ed1a77e5-ce88-4880-8f73-9a43f41a5a11/', '_self');\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.page-wrapper {\n  padding-top: $martech-spacer-4;\n}\n\n.marketing-blob {\n  background-color: $martech-cfb-orange-light;\n  color: $martech-text-primary;\n  padding: $martech-spacer-3;\n  text-align: center;\n  margin-top: $martech-spacer-4;\n  border-radius: $martech-radius-large;\n}\n\n.content-body {\n  padding: $martech-spacer-4 0;\n}\n\n.video-grid {\n  margin: $martech-spacer-4 0;\n  background-color: $martech-black;\n  padding: $martech-spacer-6 0;\n\n  h2 {\n    margin-bottom: $martech-spacer-4;\n    color: $martech-white;\n  }\n}\n\n.sponsored-block {\n  min-height: 425px;\n  color: $martech-white;\n  text-align: center;\n  background-position: bottom center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  padding: $martech-spacer-6;\n  display: flex;\n  flex-direction: column;\n  margin-top: $martech-spacer-4;\n  border-radius: $martech-radius-medium;\n\n  @include breakpoint(1024) {\n    min-height: 400px;\n    display: flex;\n    text-align: left;\n    justify-content: center;\n  }\n\n  h2 {\n    margin-bottom: $martech-spacer-4;\n  }\n}\n\n.read-more-button {\n  margin: $martech-spacer-4 0 0 0;\n  text-align: center;\n}\n</style>","import script from \"./ChannelFireball.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./ChannelFireball.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./ChannelFireball.vue?vue&type=style&index=0&id=14851996&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-14851996\"]])\n\nexport default __exports__"],"names":["router","useRouter","allCFBArticles","push","name","articles","useFetchArticles","count","verticals","series","tags","internalTags","requiredVerticals","skipPool","__exports__","editorsChoice","props","__props","videos","ref","loading","showComponent","async","onVisible","Api","youtubeRssFeed","channelId","rows","offset","then","res","set","data","results","catch","desktopSponsoredImage","mobileSponsoredImage","siteConfig","useSiteConfig","isDesktop","useDeviceType","heroData","heroLoading","hideHero","getVerticalHero","domain","vertical","excludeVerticals","result","sponsoredBlockImage","computed","value","sponsoredBlockCta","window","open"],"sourceRoot":""}