{"version":3,"mappings":"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","names":["wrapper","ref","targetIsVisible","useElementVisibility","enableDOM","stopWatch","watch","home","useHomeStore","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_hoisted_1","useBigHeroBannerStore","defineStore","homeStore","profileStore","useProfileStore","t","useI18n","status","computed","LoadStatus","banners","_a","_b","s","shuffledBanners","shuffle","bannersInDOM","b","i","currentSlideIndex","previousSlideIndex","currentSlide","previousSlide","nextSlideIndex","transitioning","autoplay","timerRef","initialized","autoplayInit","startAutoplay","toggleAutoPlay","stopAutoplay","goToNextSlide","triggerNextAutoPlay","waitUntilTrue","updateToSlide","index","nextTick","updateToSlideAfterPreviousLoaded","goToPreviousSlide","route","useRoute","store","props","__props","totalSlides","active","emit","__emit","onClick","e","count","numBanners","currentBanner","description","text","ariaHidden","onImageLoad","banner","tabIndex","bgLoaded","albumLoaded","onLoad","loaded","internalLink","profile","emitter","slides","show","_c","app","useAppStore","betaStore","useBetaStore","audioPlayer","useAltAudioPlayback","lyricVideoMVP","useLyricVideoMVPStore","Error","defineAsyncComponent","__vitePreload","RecentlyViewed","PopularSongs","ChristmasLinks","EasterLinks","TopSongs","ChartSongs","HomeThemes","LiturgyHome","LyricVideosHome","SongsByDecadeHome","CompanyLinks","SongsByLanguageHome","CCLIOnYoutube","ExclusiveBenefits","init","onMounted","updateTitleAndDescription","onActivated","beta","enableRecentlyViewed","enableEaster","enableChristmas","enableSongsForTheChurchVol1","detectScrollbarWidth","enableLyricVideoMVP"],"ignoreList":[],"sources":["../../Vue/src/components/LoadWhenVisible.vue","../../Vue/src/components/Home/SongsForTheChurchVol1.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerSliderContainer.vue","../../Vue/src/stores/BigHeroBannerStore.ts","../../Vue/src/components/BigHeroBanner/BigHeroBannerDotButton.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerControlButton.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerControls.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerScreenReader.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerSlide.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerBackgroundImg.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerSlideArtwork.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerSlideCallout.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerSlideIntro.vue","../../Vue/src/components/BigHeroBanner/BigHeroBannerCurrent.vue","../../Vue/src/components/BigHeroBanner/BigHeroBanner.vue","../../Vue/src/components/Common/AboveBannerMessages.vue","../../Vue/src/pages/Home.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useElementVisibility } from \"@vueuse/core\";\r\n\r\nconst wrapper = ref<HTMLDivElement>();\r\nconst targetIsVisible = useElementVisibility(wrapper);\r\nconst enableDOM = ref(false);\r\nconst stopWatch = watch(targetIsVisible, () => {\r\n  if (targetIsVisible.value && !enableDOM.value) {\r\n    enableDOM.value = true;\r\n    stopWatch();\r\n  }\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"wrapper\">\r\n    <slot v-if=\"enableDOM\" />\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nconst home = useHomeStore();\r\n</script>\r\n\r\n<template>\r\n  <section>\r\n    <router-link\r\n      v-if=\"home.status === LoadStatus.Ready\"\r\n      to=\"/search/results?list=custom_songs-for-the-church-1\"\r\n      class=\"homepage-link ga-seasonal-link\"\r\n      data-menu-item=\"Songs For The Church Volume 1\"\r\n    >\r\n      <Image\r\n        src=\"https://cdn.ccli.com/songselect/web/images/springharvest-ss-banner-skinny.jpg\"\r\n        alt=\"Songs For The Church Volume 1\"\r\n        class=\"h-full w-full\"\r\n      />\r\n    </router-link>\r\n    <div\r\n      v-else\r\n      class=\"homepage-link\"\r\n    >\r\n      <span class=\"placeholder h-full w-full\" />\r\n    </div>\r\n  </section>\r\n  <!-- -->\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.homepage-link {\r\n  @apply relative block h-16 overflow-hidden rounded-lg transition-all hover:brightness-90 md:h-32;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\"></script>\r\n\r\n<template>\r\n  <div class=\"slider-container\">\r\n    <slot />\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.slider-container {\r\n  @apply relative h-full w-full overflow-hidden rounded-xl bg-gray-100;\r\n  min-height: 350px;\r\n  @media screen(max-lg) {\r\n    min-height: 375px;\r\n  }\r\n  @media screen(max-md) {\r\n    min-height: 450px;\r\n  }\r\n}\r\n</style>\r\n","/* eslint-disable @typescript-eslint/no-empty-function */\r\nimport { LoadStatus } from \"@/models/frontend-only/LoadStatus\";\r\nimport { useI18n } from \"vue-i18n\";\r\n\r\nexport const useBigHeroBannerStore = defineStore(\"big-hero-banner\", () => {\r\n  const homeStore = useHomeStore();\r\n  const profileStore = useProfileStore();\r\n  const { t } = useI18n();\r\n\r\n  const status = computed(() => {\r\n    if (homeStore.status === LoadStatus.Loading) {\r\n      return LoadStatus.Loading;\r\n    } else if (homeStore.status === LoadStatus.Ready && banners.value.length) {\r\n      return LoadStatus.Ready;\r\n    } else {\r\n      return LoadStatus.Error;\r\n    }\r\n  });\r\n\r\n  const banners = computed(() => {\r\n    const banners = [\r\n      {\r\n        id: \"intro\",\r\n        type: \"INTRO\",\r\n        url:\r\n          profileStore.profile?.signUpUrl ||\r\n          \"https://profile.ccli.com/account/create?appContext=SongSelect&returnUrl=http%3a%2f%2fsongselect.ccli.com\",\r\n        img: \"https://ccli-cdn.s3.amazonaws.com/songselect/web/banner/global/en_US/ss-upgrade-banner-october-2023.jpg\",\r\n        text: {\r\n          title: t(\"SV.LIT_SaveTimeLeadWell\"),\r\n          subtitle: t(\"SV.LIT_InstantlyTransposableSheetMusicForWorship\"),\r\n          lyrics: t(\"SV.LIT_Lyrics\"),\r\n          chord: t(\"SV.LIT_ChordSheets\"),\r\n          lead: t(\"SV.LIT_LeadSheets\"),\r\n          vocal: t(\"SV.LIT_VocalSheets\"),\r\n          cta: t(\"SV.LIT_SignUpForFree\"),\r\n        },\r\n        ga: [\"send\", \"event\", \"Home (Auth)\", \"Feature\", \"INTRO\"],\r\n      },\r\n      ...(homeStore.data?.banners.filter((s) => s.type !== \"INTRO\") || []),\r\n    ];\r\n\r\n    const shuffledBanners = shuffle(\r\n      banners.filter((s) => s.type === \"ARTWORK\"),\r\n    );\r\n    return [...banners.filter((s) => s.type !== \"ARTWORK\"), ...shuffledBanners];\r\n  });\r\n\r\n  const bannersInDOM = computed(() =>\r\n    banners.value\r\n      .map((b, i) => ({\r\n        index: i,\r\n        data: b,\r\n      }))\r\n      .filter(\r\n        (b, i) =>\r\n          i === currentSlideIndex.value || i === previousSlideIndex.value,\r\n      ),\r\n  );\r\n\r\n  const currentSlide = computed(\r\n    () => banners.value.find((b, i) => i === currentSlideIndex.value) || null,\r\n  );\r\n  const previousSlide = computed(\r\n    () => banners.value.find((b, i) => i === previousSlideIndex.value) || null,\r\n  );\r\n\r\n  const currentSlideIndex = ref(0);\r\n  const previousSlideIndex = ref(-1);\r\n  const nextSlideIndex = ref(0);\r\n  const transitioning = ref(false);\r\n  const autoplay = ref(false);\r\n  let timerRef: number | null = null;\r\n  const initialized = ref(false);\r\n\r\n  function autoplayInit() {\r\n    if (initialized.value) {\r\n      return;\r\n    }\r\n    initialized.value = true;\r\n    startAutoplay();\r\n  }\r\n\r\n  function toggleAutoPlay() {\r\n    if (autoplay.value) {\r\n      stopAutoplay();\r\n    } else {\r\n      startAutoplay();\r\n    }\r\n  }\r\n\r\n  function stopAutoplay() {\r\n    autoplay.value = false;\r\n    if (timerRef !== null) {\r\n      window.clearInterval(timerRef);\r\n      timerRef = null;\r\n    }\r\n  }\r\n\r\n  function startAutoplay() {\r\n    autoplay.value = true;\r\n    if (timerRef !== null) {\r\n      clearInterval(timerRef);\r\n      timerRef = null;\r\n    }\r\n\r\n    timerRef = window.setTimeout(goToNextSlide, 4000);\r\n  }\r\n\r\n  async function triggerNextAutoPlay() {\r\n    if (status.value !== LoadStatus.Ready) {\r\n      await waitUntilTrue(() => status.value === LoadStatus.Ready);\r\n    }\r\n\r\n    if (!initialized.value) {\r\n      autoplayInit();\r\n      return;\r\n    }\r\n\r\n    if (timerRef !== null) {\r\n      clearInterval(timerRef);\r\n      timerRef = null;\r\n    }\r\n\r\n    if (autoplay.value) {\r\n      timerRef = window.setTimeout(goToNextSlide, 4000);\r\n    }\r\n  }\r\n\r\n  async function updateToSlide(index: number) {\r\n    if (currentSlideIndex.value === index) {\r\n      return;\r\n    }\r\n    nextSlideIndex.value = index;\r\n    await nextTick;\r\n    previousSlideIndex.value = currentSlideIndex.value;\r\n    currentSlideIndex.value = nextSlideIndex.value;\r\n  }\r\n\r\n  async function updateToSlideAfterPreviousLoaded() {\r\n    currentSlideIndex.value = nextSlideIndex.value;\r\n  }\r\n\r\n  function goToPreviousSlide() {\r\n    let index = currentSlideIndex.value - 1;\r\n    if (index < 0) {\r\n      index = banners.value.length - 1;\r\n    }\r\n    updateToSlide(index);\r\n  }\r\n\r\n  const route = useRoute();\r\n\r\n  function goToNextSlide() {\r\n    if (route.name !== \"Home\") {\r\n      return;\r\n    }\r\n    let index = currentSlideIndex.value + 1;\r\n    if (index >= banners.value.length) {\r\n      index = 0;\r\n    }\r\n    updateToSlide(index);\r\n  }\r\n\r\n  return {\r\n    goToPreviousSlide,\r\n    goToNextSlide,\r\n    autoplay,\r\n    toggleAutoPlay,\r\n    startAutoplay,\r\n    banners,\r\n    currentSlideIndex,\r\n    previousSlideIndex,\r\n    transitioning,\r\n    updateToSlide,\r\n    status,\r\n    bannersInDOM,\r\n    currentSlide,\r\n    triggerNextAutoPlay,\r\n    previousSlide,\r\n    updateToSlideAfterPreviousLoaded,\r\n    nextSlideIndex,\r\n    initialized,\r\n  };\r\n});\r\n","<script setup lang=\"ts\">\r\nconst store = useBigHeroBannerStore();\r\nconst props = defineProps<{\r\n  index: number;\r\n}>();\r\n\r\nconst totalSlides = computed(() => store.banners.length);\r\nconst active = computed(() => store.nextSlideIndex === props.index);\r\n</script>\r\n\r\n<template>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dot big-hero-banner-dot\"\r\n    :class=\"{ active: active }\"\r\n    :title=\"\r\n      $t('SV.MES_GoToSlide', {\r\n        current: (index + 1).toString(),\r\n        total: totalSlides.toString(),\r\n      })\r\n    \"\r\n    @click.stop.prevent=\"store.updateToSlide(index)\"\r\n  >\r\n    <FAIcon class=\"fa-solid fa-circle\" />\r\n  </button>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\ndefineProps<{\r\n  title: string;\r\n  id?: string;\r\n}>();\r\n\r\nconst emit = defineEmits<{\r\n  (e: \"click\", event: Event): void;\r\n}>();\r\n\r\nfunction onClick(e: Event) {\r\n  emit(\"click\", e);\r\n}\r\n</script>\r\n\r\n<template>\r\n  <button\r\n    type=\"button\"\r\n    :title=\"title\"\r\n    :id=\"id\"\r\n    @click=\"(e) => onClick(e)\"\r\n  >\r\n    <slot />\r\n  </button>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\nbutton {\r\n  @apply align-middle text-2xl;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst store = useBigHeroBannerStore();\r\nconst count = computed(() => store.banners.length);\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"store.status === LoadStatus.Ready\"\r\n    class=\"controls\"\r\n  >\r\n    <div class=\"arrow-controls\">\r\n      <BigHeroBannerControlButton\r\n        id=\"HeroBannerPreviousSlideButton\"\r\n        :title=\"$t('SV.LIT_PreviousSlide')\"\r\n        class=\"toggle-btn prev-btn\"\r\n        @click=\"store.goToPreviousSlide()\"\r\n      >\r\n        <FAIcon class=\"fa-light fa-chevron-left\" />\r\n      </BigHeroBannerControlButton>\r\n      <BigHeroBannerControlButton\r\n        id=\"HeroBannerNextSlideButton\"\r\n        :title=\"$t('SV.LIT_NextSlide')\"\r\n        class=\"toggle-btn next-btn\"\r\n        @click=\"store.goToNextSlide()\"\r\n      >\r\n        <FAIcon class=\"fa-light fa-chevron-right\" />\r\n      </BigHeroBannerControlButton>\r\n    </div>\r\n    <div class=\"bottom-controls\">\r\n      <BigHeroBannerControlButton\r\n        v-if=\"!store.autoplay\"\r\n        id=\"HeroBannerAutoplayStartButton\"\r\n        :title=\"$t('SV.LIT_EnableAutoSlideRotation')\"\r\n        class=\"toggle-btn\"\r\n        @click=\"store.toggleAutoPlay()\"\r\n      >\r\n        <FAIcon class=\"fa-solid fa-play\" />\r\n      </BigHeroBannerControlButton>\r\n      <BigHeroBannerControlButton\r\n        v-else\r\n        id=\"HeroBannerAutoplayPauseButton\"\r\n        :title=\"$t('SV.LIT_PauseSlideRotation')\"\r\n        class=\"toggle-btn\"\r\n        @click=\"store.toggleAutoPlay()\"\r\n      >\r\n        <FAIcon class=\"fa-solid fa-pause\" />\r\n      </BigHeroBannerControlButton>\r\n      <div class=\"flex items-center gap-2\">\r\n        <BigHeroBannerDotButton\r\n          v-for=\"(s, index) of count\"\r\n          :key=\"index\"\r\n          class=\"max-md:hidden\"\r\n          :index=\"index\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    v-else\r\n    class=\"h-2 w-full\"\r\n  ></div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.prev-btn {\r\n  @apply absolute left-5 top-[50%] z-10  -translate-y-3;\r\n}\r\n.next-btn {\r\n  @apply absolute right-5 top-[50%] z-10 -translate-y-3;\r\n}\r\n\r\n.arrow-controls:deep() {\r\n  button {\r\n    @apply text-white transition-all;\r\n    &:hover,\r\n    &:focus-visible {\r\n      @apply brightness-90;\r\n    }\r\n  }\r\n}\r\n.bottom-controls {\r\n  @apply absolute bottom-0 left-0 right-0 z-10 flex items-center justify-between gap-4 px-3 text-center;\r\n}\r\n\r\n.bottom-controls:deep() {\r\n  .dot {\r\n    @apply scale-75 text-xs text-white opacity-25 transition-all;\r\n    &.active {\r\n      @apply scale-100 opacity-100;\r\n    }\r\n  }\r\n  button:hover {\r\n    @apply opacity-100;\r\n  }\r\n\r\n  .toggle-btn {\r\n    @apply text-white hover:brightness-90 focus-visible:brightness-90;\r\n  }\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst store = useBigHeroBannerStore();\r\nconst currentSlide = computed(() => store.currentSlideIndex + 1);\r\nconst numBanners = computed(() => store.banners.length);\r\nconst currentBanner = computed(() => store.banners[store.currentSlideIndex]);\r\nconst description = computed(() => {\r\n  let text = \"\";\r\n  switch (currentBanner.value.type) {\r\n    case \"ARTWORK\":\r\n      text = `${currentBanner.value.text.title} - ${currentBanner.value.text.subtitle}`;\r\n      break;\r\n    case \"INTRO\":\r\n      text = ` ${currentBanner.value.text.title}:  ${currentBanner.value.text.lyrics},  ${currentBanner.value.text.chord}, ${currentBanner.value.text.lead}, ${currentBanner.value.text.vocal}. ${currentBanner.value.text.subtitle}`;\r\n      break;\r\n  }\r\n  return text;\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    class=\"sr-only\"\r\n    aria-live=\"polite\"\r\n    aria-atomic=\"true\"\r\n  >\r\n    {{\r\n      $t(\"SV.MES_SlideTitle\", {\r\n        current: currentSlide.toString(),\r\n        total: numBanners.toString(),\r\n        description: description,\r\n      })\r\n    }}\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nconst store = useBigHeroBannerStore();\r\n\r\nconst props = defineProps<{\r\n  index: number;\r\n  forceActive?: boolean;\r\n}>();\r\n\r\nconst ariaHidden = computed(() =>\r\n  store.currentSlideIndex !== props.index ? \"true\" : \"false\",\r\n);\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    class=\"big-hero-banner-slide\"\r\n    :data-index=\"index\"\r\n    :aria-hidden=\"ariaHidden\"\r\n  >\r\n    <slot />\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.big-hero-banner-slide {\r\n  @apply w-full flex items-center justify-center absolute top-0 left-0 right-0 bottom-0 bg-transparent;\r\n  z-index: 0;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\ndefineProps<{\r\n  img?: string;\r\n  alt: string;\r\n  firstImage?: boolean;\r\n  noLazy?: boolean;\r\n  noTransition?: boolean;\r\n}>();\r\n\r\nconst emit = defineEmits<{\r\n  (e: \"load\", event: Event): void;\r\n}>();\r\nfunction onImageLoad(e: Event) {\r\n  emit(\"load\", e);\r\n}\r\n</script>\r\n\r\n<template>\r\n  <Image\r\n    v-if=\"img\"\r\n    :src=\"img\"\r\n    :alt=\"alt\"\r\n    class=\"bg-img\"\r\n    :fetch-priority=\"firstImage ? 'high' : undefined\"\r\n    :no-lazy=\"noLazy\"\r\n    :no-transition=\"noTransition\"\r\n    @load=\"onImageLoad\"\r\n  />\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.bg-img {\r\n  @apply absolute bottom-0 left-0 right-0 top-0;\r\n  z-index: -1;\r\n}\r\n\r\n.bg-img:deep() {\r\n  .image-wrapper {\r\n    @apply bg-gray-800;\r\n  }\r\n\r\n  img {\r\n    @apply block h-full w-full object-cover object-center;\r\n  }\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { BannerArtwork } from \"@/models/Banner\";\r\n\r\nconst store = useBigHeroBannerStore();\r\n\r\nconst props = defineProps<{\r\n  index: number;\r\n  noTransition?: boolean;\r\n}>();\r\n\r\nconst banner = computed(() => store.banners[props.index] as BannerArtwork);\r\nconst tabIndex = computed(() =>\r\n  store.currentSlideIndex === props.index ? \"0\" : \"-1\",\r\n);\r\n\r\nlet bgLoaded = false;\r\nlet albumLoaded = false;\r\n\r\nconst emit = defineEmits<{\r\n  (e: \"load\"): void;\r\n}>();\r\n\r\nfunction onLoad(loaded: \"album\" | \"bg\") {\r\n  if (loaded === \"album\") {\r\n    albumLoaded = true;\r\n  }\r\n  if (loaded === \"bg\") {\r\n    bgLoaded = true;\r\n  }\r\n\r\n  if (albumLoaded && bgLoaded) {\r\n    emit(\"load\");\r\n  }\r\n}\r\n\r\nconst internalLink = computed(\r\n  () => /^\\//.test(banner.value.url) || /^\\.\\.\\//.test(banner.value.url),\r\n);\r\n</script>\r\n\r\n<template>\r\n  <BigHeroBannerSlide\r\n    :index=\"index\"\r\n    class=\"slide\"\r\n  >\r\n    <BigHeroBannerBackgroundImg\r\n      :img=\"banner.img\"\r\n      :alt=\"$t('SV.LIT_BackgroundImageTo', { title: banner.text.title })\"\r\n      :no-lazy=\"true\"\r\n      :no-transition=\"noTransition\"\r\n      @load=\"onLoad('bg')\"\r\n    />\r\n\r\n    <div class=\"slide-container\">\r\n      <div class=\"slide-cover\">\r\n        <div class=\"slide-cover-image-wrapper\">\r\n          <Image\r\n            v-if=\"banner.albumImg\"\r\n            :src=\"banner.albumImg\"\r\n            :alt=\"$t('SV.LIT_AlbumCover', { title: banner.text.title })\"\r\n            rounded\r\n            :restrict-width=\"225\"\r\n            :no-lazy=\"true\"\r\n            :no-transition=\"noTransition\"\r\n            @load=\"onLoad('album')\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"slide-text\">\r\n        <div>\r\n          <span\r\n            class=\"slide-cat\"\r\n            :style=\"{ 'background-color': banner.categoryBgColor }\"\r\n          >\r\n            {{ banner.text.category }}\r\n          </span>\r\n        </div>\r\n        <h2 class=\"slide-title\">\r\n          {{ banner.text.title }}\r\n        </h2>\r\n        <p class=\"slide-subtitle\">\r\n          {{ banner.text.subtitle }}\r\n        </p>\r\n        <div>\r\n          <Button\r\n            :to=\"(internalLink && banner.url) || undefined\"\r\n            :href=\"(!internalLink && banner.url) || undefined\"\r\n            :target=\"(!internalLink && '_blank') || undefined\"\r\n            variant=\"transparent-white\"\r\n            :tabindex=\"tabIndex\"\r\n            icon-end=\"fa-light fa-chevron-right\"\r\n            class=\"hero-banner-feature-button\"\r\n            :data-name=\"'CALLOUT: ' + banner.text.title\"\r\n          >\r\n            {{ banner.text.cta\r\n            }}<span class=\"sr-only\">\r\n              \"{{ banner.text.title }}: {{ banner.text.subtitle }}\"</span\r\n            >\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </BigHeroBannerSlide>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.slide {\r\n  @apply flex items-center justify-center text-light-100;\r\n  &::before {\r\n    content: \"\";\r\n    @apply absolute bottom-0 left-0 right-0 top-0 block;\r\n    background-color: rgba(50, 50, 50, 0.85);\r\n    z-index: -1;\r\n  }\r\n}\r\n.slide-container {\r\n  @apply grid gap-5 px-10 py-4 text-center;\r\n\r\n  @media screen(md) {\r\n    @apply flex w-full items-center gap-20 px-20 text-left;\r\n  }\r\n}\r\n.slide-cover {\r\n  flex: 1.5;\r\n}\r\n.slide-cover-image-wrapper {\r\n  height: 175px;\r\n  width: 175px;\r\n  @apply mx-auto;\r\n  @media screen(md) {\r\n    height: 225px;\r\n    width: 225px;\r\n    @apply ml-auto;\r\n  }\r\n}\r\nh2 {\r\n  @apply font-display text-xl font-bold text-light-100 md:text-3xl lg:text-4xl xl:text-5xl;\r\n}\r\n.slide-cat {\r\n  @apply inline-block rounded px-3 py-1 font-display text-xs uppercase;\r\n}\r\n.slide-text {\r\n  @apply grid md:gap-3;\r\n  flex: 3;\r\n}\r\n.slide-title {\r\n  @apply max-md:mt-1;\r\n}\r\n.slide-subtitle {\r\n  @apply max-md:mb-3;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { BannerCallout } from \"@/models/Banner\";\r\n\r\nconst store = useBigHeroBannerStore();\r\nconst props = defineProps<{\r\n  index: number;\r\n  noTransition?: boolean;\r\n}>();\r\n\r\nconst banner = computed(() => store.banners[props.index] as BannerCallout);\r\n\r\nconst emit = defineEmits<{\r\n  (e: \"load\"): void;\r\n}>();\r\n\r\nfunction onLoad() {\r\n  emit(\"load\");\r\n}\r\nconst internalLink = computed(\r\n  () => /^\\//.test(banner.value.url) || /^\\.\\.\\//.test(banner.value.url),\r\n);\r\n</script>\r\n\r\n<template>\r\n  <BigHeroBannerSlide :index=\"index\">\r\n    <div class=\"slide\">\r\n      <BigHeroBannerBackgroundImg\r\n        :img=\"banner.img\"\r\n        :first-image=\"index === 0\"\r\n        :no-lazy=\"true\"\r\n        :no-transition=\"noTransition\"\r\n        :alt=\"$t('SV.MES_CatholicChurchDescription')\"\r\n        @load=\"onLoad\"\r\n      />\r\n\r\n      <div class=\"slide-container\">\r\n        <div class=\"slide-title my-1\">\r\n          {{ banner.text.title }}\r\n        </div>\r\n        <ul class=\"slide-items my-2\">\r\n          <li>\r\n            <img\r\n              :alt=\"$t('SV.LIT_BulletIcon', { title: banner.text.bullet1 })\"\r\n              :src=\"banner.text.bulletImg1\"\r\n            />{{ banner.text.bullet1 }}\r\n          </li>\r\n          <li>\r\n            <img\r\n              :alt=\"$t('SV.LIT_BulletIcon', { title: banner.text.bullet2 })\"\r\n              :src=\"banner.text.bulletImg2\"\r\n            />{{ banner.text.bullet2 }}\r\n          </li>\r\n          <li>\r\n            <img\r\n              :alt=\"$t('SV.LIT_BulletIcon', { title: banner.text.bullet3 })\"\r\n              :src=\"banner.text.bulletImg3\"\r\n            />{{ banner.text.bullet3 }}\r\n          </li>\r\n        </ul>\r\n        <div class=\"slide-subtitle mt-2\">\r\n          {{ banner.text.subtitle }}\r\n        </div>\r\n        <div>\r\n          <router-link\r\n            v-if=\"internalLink\"\r\n            :to=\"banner.url\"\r\n            tabindex=\"-1\"\r\n            class=\"btn-purchase hero-banner-feature-button btn\"\r\n            :data-name=\"'CALLOUT: ' + banner.text.title\"\r\n          >\r\n            {{ banner.text.cta }}\r\n            <FAIcon\r\n              aria-hidden=\"true\"\r\n              class=\"fa-light fa-chevron-right ms-1\"\r\n          /></router-link>\r\n          <a\r\n            v-else\r\n            :href=\"banner.url\"\r\n            target=\"_blank\"\r\n            tabindex=\"-1\"\r\n            class=\"btn-purchase hero-banner-feature-button btn\"\r\n            :data-name=\"'CALLOUT: ' + banner.text.title\"\r\n          >\r\n            {{ banner.text.cta }}\r\n            <FAIcon\r\n              aria-hidden=\"true\"\r\n              class=\"fa-light fa-chevron-right ms-1\"\r\n          /></a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </BigHeroBannerSlide>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nimport { BannerIntro } from \"@/models/Banner\";\r\n\r\nconst profile = useProfileStore();\r\nconst store = useBigHeroBannerStore();\r\n\r\nconst props = defineProps<{\r\n  index: number;\r\n  noTransition?: boolean;\r\n}>();\r\nconst banner = computed<BannerIntro>(() => {\r\n  return store.banners[props.index] as BannerIntro;\r\n});\r\n\r\nconst tabIndex = computed(() =>\r\n  store.currentSlideIndex === props.index ? \"0\" : \"-1\",\r\n);\r\n\r\nconst emit = defineEmits<{\r\n  (e: \"load\"): void;\r\n}>();\r\n\r\nfunction onLoad() {\r\n  emit(\"load\");\r\n}\r\n\r\nconst internalLink = computed(\r\n  () => /^\\//.test(banner.value.url) || /^\\.\\.\\//.test(banner.value.url),\r\n);\r\n</script>\r\n\r\n<template>\r\n  <BigHeroBannerSlide :index=\"index || 0\">\r\n    <div class=\"big-hero-banner-intro\">\r\n      <BigHeroBannerBackgroundImg\r\n        :img=\"banner.img\"\r\n        :alt=\"$t('SV.LIT_BackgroundImageToIntro')\"\r\n        :first-image=\"index === 0\"\r\n        :no-lazy=\"true\"\r\n        :no-transition=\"noTransition\"\r\n        @load=\"onLoad\"\r\n      />\r\n      <div class=\"inner-block\">\r\n        <h1 class=\"title\">\r\n          {{ banner.text.title }}\r\n        </h1>\r\n\r\n        <div class=\"subtitle\">\r\n          {{ banner.text.subtitle }}\r\n        </div>\r\n        <div class=\"items\">\r\n          <div>\r\n            <FAIcon\r\n              class=\"fa-kit fa-ccli-lyrics\"\r\n              aria-hidden=\"true\"\r\n            />{{ banner.text.lyrics }}\r\n          </div>\r\n          <div>\r\n            <FAIcon\r\n              class=\"fa-kit fa-ccli-chord\"\r\n              aria-hidden=\"true\"\r\n            />{{ banner.text.chord }}\r\n          </div>\r\n\r\n          <div>\r\n            <FAIcon\r\n              class=\"fa-kit fa-ccli-lead\"\r\n              aria-hidden=\"true\"\r\n            />{{ banner.text.lead }}\r\n          </div>\r\n          <div>\r\n            <FAIcon\r\n              class=\"fa-kit fa-ccli-vocal\"\r\n              aria-hidden=\"true\"\r\n            />{{ banner.text.vocal }}\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <Button\r\n            :to=\"(internalLink && banner.url) || undefined\"\r\n            :href=\"(!internalLink && banner.url) || undefined\"\r\n            variant=\"transparent-white\"\r\n            class=\"hero-banner-feature-button\"\r\n            :class=\"{ hidden: !profile.profile || profile.profile.signedIn }\"\r\n            :tabindex=\"tabIndex\"\r\n            :data-name=\"'INTRO: ' + banner.text.title\"\r\n            icon-start=\"fa-solid fa-user-plus text-primary text-white\"\r\n          >\r\n            {{ banner.text.cta }}\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </BigHeroBannerSlide>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.hero-banner-feature-button.hidden {\r\n  display: none !important;\r\n}\r\n.big-hero-banner-intro {\r\n  @apply px-5 text-center text-light-100;\r\n}\r\nh1 {\r\n  @apply font-display text-3xl font-bold text-light-100 md:text-5xl;\r\n}\r\n.inner-block {\r\n  @apply grid gap-2;\r\n}\r\n.subtitle {\r\n  @apply text-2xl;\r\n}\r\n\r\n.fa-kit {\r\n  @apply mr-2 text-xl text-primary;\r\n}\r\n\r\n.items {\r\n  @apply my-2 block flex-wrap items-center gap-5 text-lg md:text-xl;\r\n}\r\n\r\n.items > div {\r\n  @apply mx-4 my-1 inline-flex whitespace-nowrap;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst store = useBigHeroBannerStore();\r\n\r\ndefineProps<{\r\n  data: any;\r\n  index: number;\r\n}>();\r\n\r\nconst loaded = ref(false);\r\n\r\nasync function onLoad() {\r\n  emitter.emit(\"LCPEvent\");\r\n  loaded.value = true;\r\n  await waitUntilTrue(() => store.status === LoadStatus.Ready);\r\n  store.triggerNextAutoPlay();\r\n}\r\n</script>\r\n\r\n<template>\r\n  <BigHeroBannerSlideIntro\r\n    v-if=\"data?.type === 'INTRO'\"\r\n    :key=\"`slide-intro-${index}`\"\r\n    :index=\"index\"\r\n    class=\"current-slide\"\r\n    :class=\"{ show: loaded }\"\r\n    @load=\"onLoad\"\r\n  />\r\n\r\n  <BigHeroBannerSlideCallout\r\n    v-else-if=\"data?.type === 'CALLOUT'\"\r\n    :key=\"`slide-callout-${index}`\"\r\n    :index=\"index\"\r\n    class=\"current-slide\"\r\n    :class=\"{ show: loaded }\"\r\n    @load=\"onLoad\"\r\n  />\r\n\r\n  <BigHeroBannerSlideArtwork\r\n    v-else-if=\"data && ['ARTWORK', 'ARTWORK-FIXED'].includes(data.type)\"\r\n    :key=\"`slide-artwork-${index}`\"\r\n    :index=\"index\"\r\n    class=\"current-slide\"\r\n    :class=\"{ show: loaded }\"\r\n    @load=\"onLoad\"\r\n  />\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.current-slide {\r\n  @apply z-10 opacity-0 transition-all;\r\n}\r\n.show {\r\n  @apply opacity-100;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst store = useBigHeroBannerStore();\r\nconst slides = computed(() => {\r\n  if (store.previousSlide) {\r\n    return [\r\n      {\r\n        index: store.previousSlideIndex,\r\n        banner: store.previousSlide,\r\n      },\r\n      {\r\n        index: store.currentSlideIndex,\r\n        banner: store.currentSlide,\r\n      },\r\n    ];\r\n  } else {\r\n    return [\r\n      {\r\n        index: store.currentSlideIndex,\r\n        banner: store.currentSlide,\r\n      },\r\n    ];\r\n  }\r\n});\r\n</script>\r\n\r\n<template>\r\n  <section>\r\n    <BigHeroBannerSliderContainer>\r\n      <BigHeroBannerCurrent\r\n        v-for=\"(k, i) of slides\"\r\n        :key=\"i\"\r\n        :index=\"k.index\"\r\n        :data=\"k.banner\"\r\n      />\r\n      <BigHeroBannerScreenReader v-if=\"store.status === LoadStatus.Ready\" />\r\n      <BigHeroBannerControls\r\n        v-if=\"store.status === LoadStatus.Ready && store.banners.length > 1\"\r\n      />\r\n    </BigHeroBannerSliderContainer>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.empty-container {\r\n  @apply bg-transparent text-black;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst profileStore = useProfileStore();\r\n\r\nconst show = computed(\r\n  () =>\r\n    profileStore.showUrgentAnnouncementsOnly ||\r\n    profileStore.profile?.displaySSBoostBasicToAdvanced ||\r\n    profileStore.profile?.displaySSBoostAdvancedToPremium ||\r\n    profileStore.profile?.displayLyricsBoost,\r\n);\r\n</script>\r\n\r\n<template content>\r\n  <div\r\n    id=\"above-banner-messages\"\r\n    v-if=\"show\"\r\n  >\r\n    <template v-if=\"profileStore.showUrgentAnnouncementsOnly\">\r\n      <Alert\r\n        v-if=\"profileStore.showExpiredMessage\"\r\n        variant=\"error\"\r\n      >\r\n        <i18n-t\r\n          keypath=\"SV.MES_SubscriptionExpired\"\r\n          scope=\"global\"\r\n          tag=\"span\"\r\n        >\r\n          <template v-slot:online>\r\n            <a\r\n              target=\"_blank\"\r\n              class=\"link\"\r\n              :href=\"\r\n                profileStore.profile?.renewSubscriptionUrl ||\r\n                'https://store.ccli.com'\r\n              \"\r\n              >{{ $t(\"SV.LIT_SubscriptionOnline\") }}</a\r\n            >\r\n          </template>\r\n          <template v-slot:phone>\r\n            <a\r\n              target=\"_blank\"\r\n              class=\"link\"\r\n              href=\"https://ccli.com/contact-ccli\"\r\n              >{{ $t(\"SV.LIT_SubscriptionPhone\") }}</a\r\n            >\r\n          </template>\r\n        </i18n-t>\r\n        <template #footer>\r\n          <Button\r\n            id=\"SubscriptionExpiredRenewCTAButton\"\r\n            variant=\"transparent-white\"\r\n            small\r\n            icon-end=\"fa-light fa-arrow-right\"\r\n            :href=\"\r\n              profileStore.profile?.renewSubscriptionUrl ||\r\n              'https://store.ccli.com'\r\n            \"\r\n          >\r\n            {{ $t(\"G.LIT_Renew\") }}\r\n          </Button>\r\n        </template>\r\n      </Alert>\r\n      <Alert\r\n        v-if=\"profileStore.showExpiringSoonMessage\"\r\n        variant=\"warning\"\r\n        icon=\"fa-light fa-circle-exclamation\"\r\n        class=\"mb-3\"\r\n      >\r\n        <i18n-t\r\n          keypath=\"SV.MES_SubscriptionExpiringSoon\"\r\n          scope=\"global\"\r\n          tag=\"span\"\r\n        >\r\n          <template v-slot:online>\r\n            <a\r\n              target=\"_blank\"\r\n              class=\"link\"\r\n              :href=\"\r\n                profileStore.profile?.renewSubscriptionUrl ||\r\n                'https://store.ccli.com'\r\n              \"\r\n              >{{ $t(\"SV.LIT_SubscriptionOnline\") }}</a\r\n            >\r\n          </template>\r\n          <template v-slot:phone>\r\n            <a\r\n              target=\"_blank\"\r\n              class=\"link\"\r\n              href=\"https://ccli.com/contact-ccli\"\r\n              >{{ $t(\"SV.LIT_SubscriptionPhone\") }}</a\r\n            >\r\n          </template>\r\n        </i18n-t>\r\n        <template #footer>\r\n          <Button\r\n            id=\"SubscriptionExpiringSoonRenewCTAButton\"\r\n            variant=\"transparent-white\"\r\n            icon-end=\"fa-light fa-arrow-right\"\r\n            small\r\n            :href=\"\r\n              profileStore.profile?.renewSubscriptionUrl ||\r\n              'https://store.ccli.com'\r\n            \"\r\n          >\r\n            {{ $t(\"G.LIT_Renew\") }}\r\n          </Button>\r\n        </template>\r\n      </Alert>\r\n      <Alert\r\n        v-if=\"profileStore.showProfileNeedsAttentionMessage\"\r\n        variant=\"warning\"\r\n        class=\"mb-3\"\r\n      >\r\n        {{ $t(\"G.LIT_ProfileRequiresYourAttention\") }}\r\n        <template #footer>\r\n          <Button\r\n            id=\"ProfileAttentionCTAButton\"\r\n            variant=\"transparent-white\"\r\n            icon-end=\"fa-light fa-arrow-right\"\r\n            small\r\n            :href=\"profileStore.profileAttentionUrl\"\r\n          >\r\n            {{ $t(\"SV.LIT_GoToProfile\") }}\r\n          </Button>\r\n        </template>\r\n      </Alert>\r\n    </template>\r\n    <template v-else>\r\n      <Alert\r\n        v-if=\"profileStore.profile?.displaySSBoostBasicToAdvanced\"\r\n        variant=\"info\"\r\n      >\r\n        <i18n-t\r\n          keypath=\"SV.MES_BoostExpiring\"\r\n          scope=\"global\"\r\n          tag=\"span\"\r\n        >\r\n          <template v-slot:level>\r\n            <span class=\"ss-announcement-emphasized\">{{\r\n              $t(\"SV.LIT_SongSelectAdvanced\")\r\n            }}</span>\r\n          </template>\r\n          <template v-slot:action>\r\n            <a\r\n              target=\"_blank\"\r\n              class=\"link\"\r\n              :href=\"\r\n                profileStore.profile?.upgradeSubscriptionUrl ||\r\n                'https://store.ccli.com'\r\n              \"\r\n              >{{ $t(\"SV.LIT_BoostUpgradeYourSubscription\") }}</a\r\n            >\r\n          </template>\r\n        </i18n-t>\r\n      </Alert>\r\n      <Alert\r\n        v-if=\"profileStore.profile?.displaySSBoostAdvancedToPremium\"\r\n        variant=\"info\"\r\n      >\r\n        <i18n-t\r\n          keypath=\"SV.MES_BoostExpiring\"\r\n          scope=\"global\"\r\n          tag=\"span\"\r\n        >\r\n          <template v-slot:level>\r\n            <span class=\"ss-announcement-emphasized\">{{\r\n              $t(\"SV.LIT_SongSelectPremium\")\r\n            }}</span>\r\n          </template>\r\n          <template v-slot:action>\r\n            <a\r\n              target=\"_blank\"\r\n              :href=\"\r\n                profileStore.profile?.upgradeSubscriptionUrl ||\r\n                'https://store.ccli.com'\r\n              \"\r\n              class=\"link\"\r\n              >{{ $t(\"SV.LIT_BoostUpgradeYourSubscription\") }}</a\r\n            >\r\n          </template>\r\n        </i18n-t>\r\n      </Alert>\r\n      <Alert\r\n        v-if=\"profileStore.profile?.displayLyricsBoost\"\r\n        variant=\"info\"\r\n      >\r\n        <i18n-t\r\n          keypath=\"SV.MES_Boost\"\r\n          scope=\"global\"\r\n          tag=\"span\"\r\n        >\r\n          <template v-slot:level>\r\n            <span class=\"ss-announcement-emphasized\">{{\r\n              $t(\"SV.LIT_LyricsInSongSelect\")\r\n            }}</span>\r\n          </template>\r\n        </i18n-t>\r\n      </Alert>\r\n    </template>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n#above-banner-messages {\r\n  @apply mb-2 grid gap-2;\r\n}\r\n\r\n.ss-announcement-emphasized {\r\n  @apply font-semibold text-primary;\r\n}\r\n\r\n:deep() {\r\n  .btn-variant-transparent-white {\r\n    @apply -my-1;\r\n  }\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst homeStore = useHomeStore();\r\nconst app = useAppStore();\r\nconst betaStore = useBetaStore();\r\nconst profile = useProfileStore();\r\nconst route = useRoute();\r\nconst audioPlayer = useAltAudioPlayback();\r\nconst lyricVideoMVP = useLyricVideoMVPStore();\r\n\r\nconst Error = defineAsyncComponent(() => import(\"@/components/Error.vue\"));\r\n\r\nconst RecentlyViewed = defineAsyncComponent(\r\n  () => import(\"@/components/Home/RecentlyViewed.vue\"),\r\n);\r\n\r\nconst PopularSongs = defineAsyncComponent(\r\n  () => import(\"@/components/Home/PopularSongs.vue\"),\r\n);\r\n\r\nconst ChristmasLinks = defineAsyncComponent(\r\n  () => import(\"@/components/Home/ChristmasLinks.vue\"),\r\n);\r\nconst EasterLinks = defineAsyncComponent(\r\n  () => import(\"@/components/Home/EasterLinks.vue\"),\r\n);\r\nconst TopSongs = defineAsyncComponent(\r\n  () => import(\"@/components/Home/TopSongs.vue\"),\r\n);\r\n\r\nlet ChartSongs: any;\r\nif (betaStore.features.ccliTop100New) {\r\n  ChartSongs = defineAsyncComponent(\r\n    () => import(\"@/components/Home/ChartSongs.vue\"),\r\n  );\r\n}\r\n\r\nconst HomeThemes = defineAsyncComponent(\r\n  () => import(\"@/components/Home/HomeThemes.vue\"),\r\n);\r\nconst LiturgyHome = defineAsyncComponent(\r\n  () => import(\"@/components/Home/LiturgyHome.vue\"),\r\n);\r\nconst LyricVideosHome = defineAsyncComponent(\r\n  () => import(\"@/components/Home/LyricVideosHome.vue\"),\r\n);\r\nconst SongsByDecadeHome = defineAsyncComponent(\r\n  () => import(\"@/components/Home/SongsByDecadeHome.vue\"),\r\n);\r\nconst CompanyLinks = defineAsyncComponent(\r\n  () => import(\"@/components/Home/CompanyLinks.vue\"),\r\n);\r\nconst SongsByLanguageHome = defineAsyncComponent(\r\n  () => import(\"@/components/Home/SongsByLanguageHome.vue\"),\r\n);\r\nconst CCLIOnYoutube = defineAsyncComponent(\r\n  () => import(\"@/components/Home/CCLIOnYoutube.vue\"),\r\n);\r\nconst ExclusiveBenefits = defineAsyncComponent(\r\n  () => import(\"@/components/Home/ExclusiveBenefits.vue\"),\r\n);\r\n\r\nconst status = computed(() => homeStore.status);\r\nconst { t } = useI18n();\r\n\r\nemitter.on(\"languageUpdated\", init);\r\nonMounted(init);\r\nfunction init() {\r\n  homeStore.getHomeData();\r\n  updateTitleAndDescription();\r\n}\r\n\r\nonActivated(updateTitleAndDescription);\r\n\r\nfunction updateTitleAndDescription() {\r\n  app.updateTitleAndDescription({\r\n    title: t(\"S.HomePageTabTitle\"),\r\n    description: t(\"S.MetaTagDescription\"),\r\n  });\r\n}\r\n\r\nconst beta = useBetaStore();\r\nconst enableRecentlyViewed = computed(() => beta.features.recentlyViewed);\r\n\r\nconst enableEaster = import.meta.env.VITE_ENABLE_HOME_TOP_EASTER === \"1\";\r\nconst enableChristmas = import.meta.env.VITE_ENABLE_HOME_CHRISTMAS === \"1\";\r\nconst enableSongsForTheChurchVol1 =\r\n  import.meta.env.VITE_ENABLE_HOME_SONGS_FOR_THE_CHURCH_VOL1 === \"1\";\r\nonMounted(() => detectScrollbarWidth());\r\n\r\nwatch(route, () => {\r\n  if (route.path !== \"/\") {\r\n    if (audioPlayer.status) {\r\n      audioPlayer.pause();\r\n    }\r\n  }\r\n});\r\n\r\nconst enableLyricVideoMVP = computed(() => lyricVideoMVP.enable);\r\n</script>\r\n\r\n<template content>\r\n  <Error v-if=\"status === LoadStatus.Error\" />\r\n  <div\r\n    v-else\r\n    class=\"home-page\"\r\n  >\r\n    <Container id=\"PageHome\">\r\n      <h1 class=\"hidden\">{{ $t(\"S.HomePageTabTitle\") }}</h1>\r\n\r\n      <AboveBannerMessages />\r\n      <BigHeroBanner />\r\n\r\n      <div\r\n        v-if=\"profile.profile && profile.features\"\r\n        class=\"below-banner\"\r\n        :class=\"{ 'placeholder-glow': homeStore.status === LoadStatus.Loading }\"\r\n      >\r\n        <RecentlyViewed\r\n          v-if=\"enableRecentlyViewed && profile.profile.signedIn\"\r\n        />\r\n        <PopularSongs v-if=\"!betaStore.features.ccliTop100New\" />\r\n        <ChartSongs v-if=\"betaStore.features.ccliTop100New\" />\r\n        <EasterLinks v-if=\"enableEaster\" />\r\n\r\n        <SongsForTheChurchVol1\r\n          v-if=\"\r\n            enableSongsForTheChurchVol1 &&\r\n            profile.profile.countryCode?.toUpperCase() === 'GB'\r\n          \"\r\n        />\r\n\r\n        <LoadWhenVisible>\r\n          <ChristmasLinks v-if=\"enableChristmas\" />\r\n          <CCLIOnYoutube\r\n            v-if=\"betaStore.features.ccliTop100New && !enableLyricVideoMVP\"\r\n          />\r\n          <LyricVideosHome\r\n            v-if=\"enableLyricVideoMVP\"\r\n            see-all-url=\"/lyric-videos\"\r\n            title=\"Lyric Videos\"\r\n            :items=\"lyricVideoMVP.latestVideos\"\r\n          />\r\n\r\n          <HomeThemes />\r\n          <TopSongs\r\n            v-if=\"\r\n              profile.features.enableCCLITopSongs &&\r\n              !betaStore.features.ccliTop100New\r\n            \"\r\n          />\r\n\r\n          <LiturgyHome />\r\n          <CompanyLinks />\r\n          <CCLIOnYoutube\r\n            v-if=\"betaStore.features.ccliTop100New && enableLyricVideoMVP\"\r\n          />\r\n\r\n          <SongsByLanguageHome />\r\n          <SongsByDecadeHome v-if=\"betaStore.features.ccliTop100New\" />\r\n\r\n          <CCLIOnYoutube v-if=\"!betaStore.features.ccliTop100New\" />\r\n          <ExclusiveBenefits />\r\n        </LoadWhenVisible>\r\n      </div>\r\n    </Container>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n:deep() {\r\n  section {\r\n    @apply mb-10;\r\n  }\r\n}\r\n.home-page {\r\n  @apply bg-base-100;\r\n}\r\n</style>\r\n"],"file":"assets/Home-DuyPsHut.js"}