{"version":3,"mappings":"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","names":["props","__props","slots","useSlots","empty","computed","color","store","useSongStore","song","t","useI18n","route","useRoute","songNumber","slug","_a","status","allProducts","products","_b","_c","_d","_e","_f","_g","_h","_i","showNav","showProducts","p","getNoAuthReasonString","authReason","NoAuthReason","youtube","useYoutubeStore","mediaStore","useMediaPlayerStore","lyricVideoMVPStore","useLyricVideoMVPStore","YoutubePlayer","defineAsyncComponent","__vitePreload","enableLyricVideoMVP","mediaItems","DataType","media","m","playItem","id","onSelectItem","onMounted","onShow","timeout","watch","skipTimer","enableDOM","ref","_imports_0","_cache","_openBlock","_createElementBlock","$t","_ctx","debug","useDebug","emits","__emit","newProps","dragging","progressVal","formattedProgress","formatTime","formattedMaxTime","bar","progressPixels","len","percent","px","onMouseDown","e","getNewProgresFromMouseLocation","onMouseMove","onMouseUp","bounds","timeSeconds","mins","seconds","mediaType","playbackStore","useFullSongPlaybackStore","beta","useBetaStore","modals","useModalStore","playPauseIcon","icon","MediaPlayerStatus","playPauseIconLabel","beforeDragStatus","onDragStart","time","onDragMove","onDragEnd","player","sourceLogo","source","nowPlaying","url","sourceTitle","getYoutubeLink","videoId","getYouTubeID","isUrlValid","CustomError","sourceUrl","togglePlay","songStore","placeholderNotLoaded","LoadStatus","placeholderNotAuthorized","enableFullPlaybackFeature","songMedia","songs","albumArtwork","bg","loadSong","waitUntilTrue","useRecentStore","defineStore","profile","useProfileStore","songNumbers","useLocalStorage","onViewSongNumber","index","s","Error","NotFound","recent","translations","useTranslationStore","appStore","useAppStore","r","numberRegex","validSongNumber","fullPath","translationCode","updatePageTitleAndDescription","authors","i","artist","title","pageTitle","description","updatePageTitle","hasLyrics","hasChords","hasSheet","titleKey","router","onBeforeUnmount","pausePlayingMusic","onDeactivated","enableRecordingFocus"],"ignoreList":[],"sources":["../../Vue/src/components/NavProducts/NavProductsButton.vue","../../Vue/src/components/NavProducts/NavProducts.vue","../../Vue/src/components/MediaPlayer/MediaPlayerStickyList.vue","../../Vue/src/components/SlideTransition.vue","../../../../../../img/spotify-logo.svg","../../Vue/src/components/MediaPlayer/YoutubeLogo.vue","../../Vue/src/components/MediaPlayer/ProgressBar.vue","../../Vue/src/components/MediaPlayer/NowPlaying.vue","../../Vue/src/components/MediaPlayer/NowPlayingFull.vue","../../Vue/src/components/MediaPlayer/MediaPlayerSticky.vue","../../Vue/src/components/MediaPlayer/MediaPlayerStickyFullSongPlayback.vue","../../Vue/src/components/AboveFoldSplash/AboveFoldSplash.vue","../../Vue/src/components/AboveFoldSplash/AboveFoldSplashRecordingFocused.vue","../../Vue/src/stores/RecentStore.ts","../../Vue/src/pages/SongTemplate.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nconst props = defineProps<{\r\n  type?: string;\r\n  color?: string;\r\n  active?: boolean;\r\n  to?: string;\r\n  icon?: string;\r\n  href?: string;\r\n  id?: string;\r\n  gaLoop?: boolean;\r\n  placeholder?: boolean;\r\n}>();\r\n\r\nconst slots = useSlots();\r\nconst empty = computed(() => !slots.default);\r\nconst color = computed(() => props.color || undefined);\r\n</script>\r\n\r\n<template>\r\n  <span\r\n    v-if=\"placeholder\"\r\n    class=\"nav-product-link\"\r\n    :class=\"{ active: active }\"\r\n  >\r\n    <span\r\n      class=\"placeholder\"\r\n      :style=\"{ color: color, width: '1em' }\"\r\n    />\r\n    <span class=\"text\">\r\n      <span\r\n        class=\"placeholder\"\r\n        style=\"width: 50px\"\r\n      />\r\n    </span>\r\n  </span>\r\n  <router-link\r\n    v-else-if=\"!empty && to\"\r\n    :id=\"id\"\r\n    :class=\"{ active: props.active, 'ga-loop': gaLoop }\"\r\n    :to=\"to\"\r\n    class=\"nav-product-link\"\r\n    :data-loopcommunity-link=\"gaLoop ? 'SongDetail' : undefined\"\r\n  >\r\n    <i\r\n      v-if=\"icon\"\r\n      class=\"link-icon\"\r\n      :class=\"icon\"\r\n      :style=\"{ color: color }\"\r\n    />\r\n    <span class=\"text\">\r\n      <slot></slot>\r\n    </span>\r\n  </router-link>\r\n  <a\r\n    v-else-if=\"!empty && href\"\r\n    :id=\"id\"\r\n    :class=\"{ active: active, 'ga-loop': gaLoop }\"\r\n    :href=\"href\"\r\n    class=\"nav-product-link\"\r\n    target=\"_blank\"\r\n    :data-loopcommunity-link=\"gaLoop ? 'SongDetail' : undefined\"\r\n  >\r\n    <i\r\n      v-if=\"icon\"\r\n      class=\"link-icon\"\r\n      :class=\"icon\"\r\n      :style=\"{ color: color }\"\r\n    />\r\n    <span class=\"text\">\r\n      <slot></slot>\r\n    </span>\r\n  </a>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\nspan,\r\na,\r\nbutton {\r\n  &.nav-product-link {\r\n    @apply flex h-12 items-center justify-center gap-1 rounded-full px-4 text-lg leading-4 sm:h-16 sm:px-10;\r\n  }\r\n}\r\n\r\na,\r\nbutton {\r\n  @apply flex h-12 items-center justify-center gap-1 rounded-full px-6 text-lg leading-4 transition-all sm:h-16 sm:px-10;\r\n\r\n  &:not(.router-link-exact-active) {\r\n    @apply px-2 sm:px-6 2xl:px-10;\r\n    .text {\r\n      @apply hidden xl:inline;\r\n    }\r\n    &:hover {\r\n      @apply bg-light-500;\r\n    }\r\n  }\r\n\r\n  &.router-link-exact-active {\r\n    @apply pointer-events-none bg-primary font-bold text-white;\r\n    i,\r\n    svg {\r\n      @apply text-white;\r\n    }\r\n    .text {\r\n      @apply hidden sm:inline;\r\n    }\r\n  }\r\n}\r\n\r\n.link-icon {\r\n  @apply text-xl text-primary sm:text-2xl;\r\n}\r\n.ga-loop .link-icon {\r\n  @apply text-loop-green;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { NoAuthReason } from \"@/models/NoAuthReason\";\r\n\r\nconst store = useSongStore();\r\nconst song = computed(() => store.song);\r\nconst { t } = useI18n();\r\nconst route = useRoute();\r\nconst songNumber = computed(() => route.params.songNumber);\r\nconst slug = computed(() => store.song?.slug || route.params.slug);\r\nconst status = computed(() => store.status);\r\n\r\nconst allProducts = computed(() => {\r\n  const products: {\r\n    to?: string;\r\n    href?: string;\r\n    show: boolean;\r\n    icon: string;\r\n    label: string;\r\n    subtitle?: string;\r\n    id?: string;\r\n    gaLoop: boolean;\r\n  }[] = [\r\n    {\r\n      id: \"general-tab\",\r\n      to: `/songs/${songNumber.value}/${slug.value}`,\r\n      show: true,\r\n      icon: \"fa-light fa-info-circle\",\r\n      label: t(\"SV.LIT_General\"),\r\n      gaLoop: false,\r\n    },\r\n  ];\r\n\r\n  if (song.value?.products.lyrics.exists) {\r\n    products.push({\r\n      to: `/songs/${songNumber.value}/${slug.value}/viewlyrics`,\r\n      show: !!song.value?.products.lyrics.exists,\r\n      icon: \"fa-kit fa-ccli-lyrics\",\r\n      label: t(\"S.LIT_Lyrics\"),\r\n      gaLoop: false,\r\n    });\r\n  }\r\n  if (song.value?.products.chords.exists) {\r\n    products.push({\r\n      to: `/songs/${songNumber.value}/${slug.value}/viewchordsheet`,\r\n      show: !!song.value?.products.chords.exists,\r\n      icon: \"fa-kit fa-ccli-chord\",\r\n      label: t(\"S.LIT_Chords\"),\r\n      gaLoop: false,\r\n    });\r\n  }\r\n  if (song.value?.products.lead.exists) {\r\n    products.push({\r\n      to: `/songs/${songNumber.value}/${slug.value}/viewleadsheet`,\r\n      show: !!song.value?.products.lead.exists,\r\n      icon: \"fa-kit fa-ccli-lead\",\r\n      label: t(\"S.LIT_Lead\"),\r\n      gaLoop: false,\r\n    });\r\n  }\r\n  if (song.value?.products.vocal.exists) {\r\n    products.push({\r\n      to: `/songs/${songNumber.value}/${slug.value}/viewvocalsheet`,\r\n      show: !!song.value?.products.vocal.exists,\r\n      icon: \"fa-kit fa-ccli-vocal\",\r\n      label: t(\"S.LIT_Vocal\"),\r\n      gaLoop: false,\r\n    });\r\n  }\r\n  if (song.value?.products.multitracks.exists) {\r\n    products.push({\r\n      href:\r\n        song.value.products.multitracks.url ||\r\n        `https://loopcommunity.com/search?query=${song.value.ccliSongNumber}&sort=-best_selling`,\r\n      show: !!song.value.products.multitracks.exists,\r\n      icon: \"fa-kit fa-loop-logo\",\r\n      label: \"Multitracks\",\r\n      subtitle: \"Loop Community®\",\r\n      id: \"SongLoopCommunityMultitracksLink\",\r\n      gaLoop: true,\r\n    });\r\n  }\r\n\r\n  return products;\r\n});\r\n\r\nconst showNav = computed(() => allProducts.value.length > 1);\r\nconst showProducts = computed(() => allProducts.value.filter((p) => p.show));\r\n\r\nfunction getNoAuthReasonString(authReason?: NoAuthReason | null) {\r\n  if (authReason === undefined || authReason === null) {\r\n    return undefined;\r\n  }\r\n\r\n  if (authReason === NoAuthReason.NotAuthenticated) {\r\n    return \"NotAuthenticated\";\r\n  } else if (authReason === NoAuthReason.LyricsRequireSsSubscription) {\r\n    return \"LyricsRequireSsSubscription\";\r\n  } else if (authReason === NoAuthReason.RequiresSubscriptionUpgrade) {\r\n    return \"RequiresSubscriptionUpgrade\";\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <nav\r\n    v-if=\"store.placeholderNotLoaded\"\r\n    id=\"products-nav\"\r\n    :class=\"`products-nav-count-6`\"\r\n  >\r\n    <NavProductsButton\r\n      v-for=\"(b, i) of 6\"\r\n      :id=\"'placeholder' + b\"\r\n      ref=\"buttonRefs\"\r\n      :key=\"i\"\r\n      class=\"nav-item\"\r\n      placeholder\r\n    ></NavProductsButton>\r\n  </nav>\r\n  <nav\r\n    v-else-if=\"status === LoadStatus.Ready && showNav\"\r\n    id=\"products-nav\"\r\n    :class=\"`products-nav-count-${showProducts.length}`\"\r\n    :data-songnumber=\"`${songNumber}`\"\r\n    :data-content-general-not-authorized=\"\r\n      getNoAuthReasonString(song?.products.general.noAuthReason)\r\n    \"\r\n    :data-content-lyrics-not-authorized=\"\r\n      getNoAuthReasonString(song?.products.lyrics.noAuthReason)\r\n    \"\r\n    :data-content-chords-not-authorized=\"\r\n      getNoAuthReasonString(song?.products.chords.noAuthReason)\r\n    \"\r\n    :data-content-lead-not-authorized=\"\r\n      getNoAuthReasonString(song?.products.lead.noAuthReason)\r\n    \"\r\n    :data-content-vocal-not-authorized=\"\r\n      getNoAuthReasonString(song?.products.vocal.noAuthReason)\r\n    \"\r\n    :data-content-multitracks-not-authorized=\"\r\n      getNoAuthReasonString(song?.products.multitracks.noAuthReason)\r\n    \"\r\n  >\r\n    <NavProductsButton\r\n      v-for=\"(b, i) of showProducts\"\r\n      :id=\"b.id\"\r\n      ref=\"buttonRefs\"\r\n      :key=\"i\"\r\n      class=\"nav-item\"\r\n      :icon=\"b.icon\"\r\n      :to=\"b.to\"\r\n      :href=\"b.href\"\r\n      :ga-loop=\"b.gaLoop\"\r\n      :active=\"!$route.params.slug && b.id === 'general-tab'\"\r\n      :title=\"b.label\"\r\n    >\r\n      <div class=\"text-start\">\r\n        <div\r\n          v-if=\"b.subtitle\"\r\n          class=\"small\"\r\n        >\r\n          <span v-html=\"updateTrademark(b.subtitle)\"></span>\r\n        </div>\r\n        <div>{{ b.label }}</div>\r\n      </div>\r\n    </NavProductsButton>\r\n  </nav>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n#products-nav {\r\n  @apply flex items-center justify-between overflow-hidden rounded-full bg-white p-0 p-1 md:gap-10;\r\n  &.products-nav-count-1,\r\n  &.products-nav-count-2,\r\n  &.products-nav-count-3 {\r\n    @apply justify-center gap-8 md:gap-16;\r\n  }\r\n}\r\n.small {\r\n  @apply text-xs leading-4;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { FEMediaItem } from \"@/models/frontend-only/FEMediaItem\";\r\n\r\nconst store = useSongStore();\r\nconst youtube = useYoutubeStore();\r\nconst mediaStore = useMediaPlayerStore();\r\nconst lyricVideoMVPStore = useLyricVideoMVPStore();\r\n\r\nconst YoutubePlayer = defineAsyncComponent(\r\n  () => import(\"@/components/YouTubePlayer.vue\"),\r\n);\r\n\r\nconst enableLyricVideoMVP = computed(() => lyricVideoMVPStore.enable);\r\n\r\nconst mediaItems = computed(() => {\r\n  if (store.dataType === DataType.Arrangement) {\r\n    return store.arrangement?.alternateArrangements ?? null;\r\n  } else {\r\n    const media = store.media ?? null;\r\n    if (!enableLyricVideoMVP.value) {\r\n      return media;\r\n    } else {\r\n      return media.filter((m) => m.type !== \"video\");\r\n    }\r\n  }\r\n});\r\n\r\nfunction playItem(id: string) {\r\n  id === mediaStore.nowPlayingId\r\n    ? mediaStore.togglePlay()\r\n    : mediaStore.playMediaItem(id);\r\n  window.scrollTo(0, 0);\r\n}\r\n\r\nfunction onSelectItem(m: FEMediaItem) {\r\n  playItem(m.id);\r\n}\r\n\r\nonMounted(() => {\r\n  mediaStore.reset();\r\n});\r\n</script>\r\n\r\n<template>\r\n  <MediaSlider\r\n    v-if=\"mediaItems\"\r\n    class=\"slider\"\r\n    dark\r\n  >\r\n    <MediaSliderItem\r\n      v-for=\"(m, i) of mediaItems\"\r\n      :key=\"i\"\r\n      class=\"media-item\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"media-item-button ga-media-item-button\"\r\n        :class=\"{\r\n          active: m.id === mediaStore.nowPlayingId,\r\n          'media-item-button-video': m.type === 'video',\r\n          'media-item-button-audio': m.type !== 'video',\r\n        }\"\r\n        :data-song-number=\"store.song?.ccliSongNumber\"\r\n        :data-song-media-id=\"m.id\"\r\n        @click=\"onSelectItem(m as FEMediaItem)\"\r\n      >\r\n        <div\r\n          class=\"media-item-artwork\"\r\n          :class=\"{\r\n            'media-item-artwork-video': m.type === 'video',\r\n            'media-item-artwork-audio': m.type !== 'video',\r\n          }\"\r\n        >\r\n          <AlbumArtwork\r\n            :url=\"m.artwork || ''\"\r\n            :media-type=\"m.type === 'video' ? 'video' : 'song'\"\r\n            :show-status=\"true\"\r\n            :playing=\"\r\n              (m.id === mediaStore.nowPlayingId &&\r\n                mediaStore.nowPlaying &&\r\n                mediaStore.status === MediaPlayerStatus.Playing) ||\r\n              false\r\n            \"\r\n            :restrict-width=\"m.type === 'video' ? 213 : 120\"\r\n          />\r\n\r\n          <div class=\"youtube-wrapper\">\r\n            <YoutubePlayer\r\n              v-if=\"\r\n                m.id === mediaStore.nowPlayingId &&\r\n                m.type === 'video' &&\r\n                mediaStore.getYoutubeUrl(m)\r\n              \"\r\n              :class=\"youtube.isFullScreen ? 'hidden' : 'block'\"\r\n              :src=\"mediaStore.getYoutubeUrl(m)!\"\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            v-if=\"m.id !== mediaStore.nowPlayingId\"\r\n            class=\"media-item-artwork-focus\"\r\n          >\r\n            <FAIcon class=\"fa-solid fa-play fa-2x\" />\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"after-artwork\">\r\n          <div\r\n            class=\"labels larger-maxwidth\"\r\n            :class=\"{ 'video-label': m.type === 'video' }\"\r\n          >\r\n            <div\r\n              class=\"title\"\r\n              :title=\"m.title\"\r\n              :class=\"{ 'asian-text': m.title && hasAsianText(m.title) }\"\r\n            >\r\n              {{ m.title }}\r\n            </div>\r\n            <div\r\n              class=\"subtitle\"\r\n              :title=\"m.subtitle\"\r\n              :class=\"{ 'asian-text': m.subtitle && hasAsianText(m.subtitle) }\"\r\n            >\r\n              {{ m.subtitle }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </MediaSliderItem>\r\n  </MediaSlider>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.media-item {\r\n  --thumbnail-height: 7.5em;\r\n  --thumbnail-width-video: calc(var(--thumbnail-height) * 16 / 9);\r\n  --thumbnail-width: var(--thumbnail-height);\r\n}\r\n.media-item-artwork-video {\r\n  height: var(--thumbnail-height);\r\n  width: var(--thumbnail-width-video);\r\n}\r\n.media-item-artwork-audio {\r\n  height: var(--thumbnail-height);\r\n  width: var(--thumbnail-width);\r\n}\r\n.media-item-button {\r\n}\r\n.media-item-artwork {\r\n  @apply relative;\r\n}\r\n.media-item-artwork-focus {\r\n  @apply absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-black bg-opacity-25 opacity-0 transition-all;\r\n}\r\n.media-item-button {\r\n  &:hover,\r\n  &:focus-visible {\r\n    .media-item-artwork-focus {\r\n      @apply opacity-100;\r\n    }\r\n    :deep() {\r\n      .content.empty {\r\n        i,\r\n        svg {\r\n          @apply opacity-0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n.media-item-button-video {\r\n  width: var(--thumbnail-width-video);\r\n}\r\n\r\n.title {\r\n  @apply line-clamp-1 leading-5;\r\n  &:not(.asian-text) {\r\n    padding-bottom: 0.14em;\r\n  }\r\n}\r\n.subtitle {\r\n  @apply line-clamp-1 text-sm leading-5;\r\n  &:not(.asian-text) {\r\n    padding-bottom: 0.14em;\r\n  }\r\n}\r\n.title,\r\n.subtitle {\r\n  max-width: var(--thumbnail-width);\r\n}\r\n.after-artwork {\r\n  @apply py-1 text-left;\r\n}\r\n.youtube-wrapper {\r\n  @apply absolute bottom-0 left-0 right-0 top-0 overflow-hidden rounded-lg;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst props = defineProps<{\r\n  show?: boolean;\r\n}>();\r\n\r\nonMounted(() => {\r\n  onShow(true);\r\n});\r\n\r\nlet timeout: number | null;\r\n\r\nwatch(() => props.show, onShow);\r\nfunction onShow(skipTimer?: boolean) {\r\n  if (timeout) {\r\n    window.clearTimeout(timeout);\r\n    timeout = null;\r\n  }\r\n  if (props.show) {\r\n    enableDOM.value = true;\r\n  } else {\r\n    if (!skipTimer) {\r\n      timeout = window.setTimeout(() => {\r\n        enableDOM.value = false;\r\n        timeout = null;\r\n      }, 1000);\r\n    } else {\r\n      enableDOM.value = false;\r\n    }\r\n  }\r\n}\r\nconst enableDOM = ref(false);\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    class=\"collapse\"\r\n    :class=\"{\r\n      'collapse-close': !show,\r\n      'collapse-open': show,\r\n    }\"\r\n  >\r\n    <div\r\n      class=\"collapse-content\"\r\n      v-if=\"enableDOM\"\r\n    >\r\n      <div>\r\n        <slot></slot>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.collapse {\r\n  @apply rounded-none w-full min-w-0;\r\n}\r\n.collapse-content {\r\n  @apply p-0;\r\n}\r\n</style>\r\n","export default \"__VITE_PUBLIC_ASSET__54b1baad__\"","<script setup lang=\"ts\"></script>\r\n\r\n<template>\r\n  <img\r\n    src=\"https://cdn.ccli.com/songselect/vue/youtube-logo.svg\"\r\n    :alt=\"$t('SV.LIT_YoutubeLogo')\"\r\n    class=\"img\"\r\n  />\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.img {\r\n  filter: contrast(500%) invert(100%) grayscale(100%);\r\n  width: 80px;\r\n  height: 18px;\r\n  display: block;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst debug = useDebug();\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    progress?: number;\r\n    lengthSeconds?: number;\r\n    shortMode?: boolean;\r\n    darkMode?: boolean;\r\n  }>(),\r\n  {\r\n    progress: 0,\r\n    lengthSeconds: 1,\r\n    previewLengthSeconds: 1,\r\n\r\n    darkMode: false,\r\n    shortMode: false,\r\n  },\r\n);\r\n\r\nconst emits = defineEmits<{\r\n  (e: \"dragstart\", time: number): void;\r\n  (e: \"dragmove\", time: number): void;\r\n  (e: \"dragend\", time: number): void;\r\n}>();\r\n\r\nwatch(\r\n  props,\r\n  (newProps) => {\r\n    if (!dragging) {\r\n      progressVal.value = newProps.progress;\r\n    }\r\n  },\r\n  { deep: true },\r\n);\r\n\r\nconst formattedProgress = computed(() => formatTime(progressVal.value));\r\nconst formattedMaxTime = computed(() => formatTime(props.lengthSeconds));\r\nconst bar = ref<HTMLElement | null>(null);\r\nconst progressVal = ref(0);\r\nconst progressPixels = computed(() => {\r\n  const len = props.lengthSeconds;\r\n  const percent = Math.min(1, progressVal.value / len);\r\n  let px = 0;\r\n  if (bar.value && (bar.value as HTMLElement).getBoundingClientRect) {\r\n    const bounds = (bar.value as HTMLElement).getBoundingClientRect();\r\n    px = bounds.width * percent;\r\n  }\r\n  return px;\r\n});\r\nlet dragging = false;\r\n\r\nfunction onMouseDown(e: MouseEvent) {\r\n  getNewProgresFromMouseLocation(e);\r\n  dragging = true;\r\n  onMouseMove(e);\r\n  emits(\"dragstart\", progressVal.value);\r\n  window.addEventListener(\"mousemove\", onMouseMove);\r\n  window.addEventListener(\"mouseup\", onMouseUp);\r\n}\r\n\r\nfunction onMouseUp() {\r\n  debug.log(\"on drag end\");\r\n  dragging = false;\r\n  emits(\"dragend\", progressVal.value);\r\n  window.removeEventListener(\"mousemove\", onMouseMove);\r\n  window.removeEventListener(\"mouseup\", onMouseUp);\r\n}\r\n\r\nfunction onMouseMove(e: MouseEvent) {\r\n  getNewProgresFromMouseLocation(e);\r\n  emits(\"dragmove\", progressVal.value);\r\n  e.stopPropagation();\r\n  e.preventDefault();\r\n  e.cancelBubble = true;\r\n  return false;\r\n}\r\n\r\nfunction getNewProgresFromMouseLocation(e: MouseEvent) {\r\n  const len = props.lengthSeconds;\r\n  const bounds = (bar.value as HTMLElement).getBoundingClientRect();\r\n  progressVal.value =\r\n    (Math.min(Math.max(e.clientX - bounds.left, 0), bounds.width) /\r\n      bounds.width) *\r\n    len;\r\n}\r\n\r\nfunction formatTime(timeSeconds: number): string {\r\n  if (!timeSeconds || isNaN(timeSeconds)) {\r\n    return \"0:00\";\r\n  }\r\n  const mins = Math.floor(timeSeconds / 60).toString();\r\n  const seconds = Math.round(timeSeconds % 60)\r\n    .toString()\r\n    .padStart(2, \"0\");\r\n  const formatted = `${mins}:${seconds}`;\r\n  return formatted;\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    class=\"progress-bar-wrapper\"\r\n    :class=\"{ 'dark-mode': darkMode }\"\r\n  >\r\n    <div\r\n      v-if=\"!shortMode\"\r\n      class=\"display-timing\"\r\n    >\r\n      {{ formattedProgress }}\r\n    </div>\r\n    <div class=\"progress-bar-line-wrapper\">\r\n      <div\r\n        class=\"progress-bar\"\r\n        @mousedown=\"onMouseDown\"\r\n        @mouseup=\"onMouseUp\"\r\n      >\r\n        <div class=\"bar-wrapper\">\r\n          <div\r\n            ref=\"bar\"\r\n            class=\"bar\"\r\n          ></div>\r\n        </div>\r\n        <div\r\n          class=\"bar-active\"\r\n          :style=\"`width: ${progressPixels}px`\"\r\n        ></div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"dot\"\r\n          :style=\"`transform: translateX(${progressPixels}px)`\"\r\n        ></button>\r\n      </div>\r\n    </div>\r\n    <div\r\n      v-if=\"!shortMode\"\r\n      class=\"display-timing\"\r\n    >\r\n      {{ formattedMaxTime }}\r\n    </div>\r\n    <div\r\n      v-else\r\n      class=\"display-timing\"\r\n    >\r\n      {{ formattedProgress }}\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.progress-bar-wrapper {\r\n  --bar-height: 4px;\r\n  --dot-size: 15px;\r\n  --half-bar-height: calc(var(--bar-height) / 2);\r\n  --half-dot-size: calc(var(--dot-size) / 2);\r\n  --radius: calc(var(--bar-height) / 2);\r\n\r\n  /* --color-bar: theme(colors.gray.400);*/\r\n  /* --color-dot: theme(colors.primary);*/\r\n  /* --color-accent: theme(colors.primary);*/\r\n  --color-bar: theme(colors.white);\r\n  --color-dot: theme(colors.primary);\r\n  --color-accent: theme(colors.primary);\r\n  --color-text: theme(colors.white);\r\n\r\n  @apply flex flex-1 items-center gap-5;\r\n  color: var(--color-text);\r\n}\r\n.progress-bar-wrapper.dark-mode {\r\n  --color-bar: theme(colors.gray.200);\r\n  --color-text: theme(colors.gray.800);\r\n  color: var(--color-text);\r\n}\r\n\r\n.progress-bar {\r\n  @apply relative z-10 mx-0 my-2 flex flex-grow cursor-grab items-center justify-center overflow-visible;\r\n  height: 1.5em;\r\n  &.preview-mode {\r\n    @apply left-[15%] w-[25%];\r\n  }\r\n}\r\n.progress-bar-line-wrapper {\r\n  @apply relative flex-1;\r\n}\r\n.bar-wrapper {\r\n  @apply relative flex w-full items-center;\r\n}\r\n.bar {\r\n  @apply box-border h-0 flex-grow;\r\n  border-bottom: var(--bar-height) solid var(--color-bar);\r\n  border-radius: var(--radius);\r\n}\r\n\r\n.bar-active {\r\n  @apply absolute left-0;\r\n  border-radius: var(--radius);\r\n  top: calc(1.5em / 2 - var(--half-bar-height));\r\n  height: var(--bar-height);\r\n  background: var(--color-accent);\r\n}\r\n\r\n.dot {\r\n  @apply pointer-events-none absolute inline-block border-0;\r\n  left: calc(-1 * var(--half-dot-size));\r\n  top: calc(1.5em / 2 - var(--half-dot-size));\r\n  border-radius: 50%;\r\n  height: var(--dot-size);\r\n  width: var(--dot-size);\r\n  background: var(--color-dot);\r\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);\r\n}\r\n\r\n.display-timing {\r\n  font-size: 0.8em;\r\n}\r\n\r\n.sign-in {\r\n  @apply absolute;\r\n  margin-top: 0.25em;\r\n  font-size: 0.8em;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst mediaStore = useMediaPlayerStore();\r\n\r\nconst mediaType = computed(() =>\r\n  mediaStore.nowPlaying?.type === \"video\" ? \"video\" : \"song\",\r\n);\r\n</script>\r\n\r\n<template>\r\n  <div class=\"now-playing\">\r\n    <div\r\n      class=\"album\"\r\n      :class=\"{ 'album-video': mediaType === 'video' }\"\r\n    >\r\n      <AlbumArtwork\r\n        :media-type=\"mediaType\"\r\n        :url=\"mediaStore.nowPlaying?.artwork ?? ''\"\r\n        :restrict-width=\"80\"\r\n      />\r\n    </div>\r\n    <div class=\"now-playing-text\">\r\n      <div\r\n        class=\"title\"\r\n        :title=\"mediaStore.nowPlaying?.title\"\r\n        :class=\"{ 'asian-text': hasAsianText(mediaStore.nowPlaying?.title) }\"\r\n      >\r\n        {{ mediaStore.nowPlaying?.title ?? \"\" }}\r\n      </div>\r\n      <div\r\n        class=\"subtitle\"\r\n        :title=\"mediaStore.nowPlaying?.subtitle\"\r\n      >\r\n        {{ mediaStore.nowPlaying?.subtitle ?? \"\" }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.album {\r\n  @apply h-16 w-16 sm:h-20 sm:w-20;\r\n}\r\n.now-playing {\r\n  @apply flex items-center gap-3 text-white;\r\n}\r\n.title {\r\n  @apply line-clamp-2 text-lg leading-5;\r\n  &:not(.asian-text) {\r\n    padding-bottom: 0.14em;\r\n  }\r\n}\r\n.subtitle {\r\n  @apply leading-5 text-gray-200;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport getYouTubeID from \"get-youtube-id\";\r\n\r\nconst playbackStore = useFullSongPlaybackStore();\r\nconst store = useMediaPlayerStore();\r\nconst youtube = useYoutubeStore();\r\nconst beta = useBetaStore();\r\nconst debug = useDebug();\r\nconst { t } = useI18n();\r\nconst modals = useModalStore();\r\nconst enableSpotify = import.meta.env.VITE_ENABLE_SPOTIFY === \"1\";\r\n\r\ndefineProps<{ progressBarOnly?: boolean }>();\r\n\r\nconst playPauseIcon = computed(() => {\r\n  let icon = \"fa-solid fa-play\";\r\n  if (store.status === MediaPlayerStatus.Loading) {\r\n    icon = \"fa-solid fa-spinner-third fa-spin\";\r\n  } else if (store.status === MediaPlayerStatus.Paused) {\r\n    icon = \"fa-solid fa-play\";\r\n  } else if (store.status === MediaPlayerStatus.Ended) {\r\n    icon = \"fa-solid fa-play\";\r\n  } else if (store.status === MediaPlayerStatus.Unloaded) {\r\n    icon = \"fa-solid fa-play\";\r\n  } else if (store.status === MediaPlayerStatus.Error) {\r\n    icon = \"fa-solid fa-play\";\r\n  } else {\r\n    icon = \"fa-solid fa-pause\";\r\n  }\r\n  return icon;\r\n});\r\n\r\nconst status = computed(() => {\r\n  switch (store.status) {\r\n    case MediaPlayerStatus.Ended:\r\n      return \"Ended\";\r\n    case MediaPlayerStatus.Loading:\r\n      return \"Loading\";\r\n    case MediaPlayerStatus.Error:\r\n      return \"Error\";\r\n    case MediaPlayerStatus.Paused:\r\n      return \"Paused\";\r\n    case MediaPlayerStatus.Playing:\r\n      return \"Playing\";\r\n    case MediaPlayerStatus.Unloaded:\r\n      return \"Unloaded\";\r\n  }\r\n});\r\nconst playPauseIconLabel = computed(() => {\r\n  let icon = \"Play\";\r\n  if (store.status === MediaPlayerStatus.Loading) {\r\n    icon = \"Loading\";\r\n  } else if (store.status === MediaPlayerStatus.Paused) {\r\n    icon = \"Play\";\r\n  } else if (store.status === MediaPlayerStatus.Ended) {\r\n    icon = \"Play\";\r\n  } else if (store.status === MediaPlayerStatus.Unloaded) {\r\n    icon = \"Play\";\r\n  } else if (store.status === MediaPlayerStatus.Error) {\r\n    icon = \"Play\";\r\n  } else {\r\n    icon = \"Pause\";\r\n  }\r\n  return icon;\r\n});\r\n\r\nlet beforeDragStatus = MediaPlayerStatus.Loading;\r\n\r\nfunction onDragStart(time: number) {\r\n  beforeDragStatus = store.status;\r\n  store.pause();\r\n  store.goToTime(time);\r\n}\r\n\r\nfunction onDragMove(time: number) {\r\n  store.goToTime(time);\r\n}\r\n\r\nasync function onDragEnd(time: number) {\r\n  debug.log(\"on drag end - go to time\", time);\r\n  await store.goToTime(time, true);\r\n  if (\r\n    beforeDragStatus === MediaPlayerStatus.Playing ||\r\n    beforeDragStatus === MediaPlayerStatus.Loading\r\n  ) {\r\n    debug.log(\"play\");\r\n    store.play();\r\n  }\r\n}\r\n\r\nconst player = computed(() => store.mediaPlayer);\r\n\r\nconst sourceLogo = computed(() => {\r\n  let source = player.value;\r\n  if (!store.nowPlaying) {\r\n    source = store.determineMediaPlayer(store.mediaItems[0]);\r\n  }\r\n  if (!nowPlaying.value) {\r\n    return null;\r\n  }\r\n\r\n  if (source === \"html-audio\") {\r\n    if (\r\n      nowPlaying.value.previewUrl?.includes(\"apple.com\") &&\r\n      nowPlaying.value.urls.find((url) => url.source === \"iTunes\")\r\n    ) {\r\n      return \"apple\";\r\n    } else {\r\n      return \"\";\r\n    }\r\n  }\r\n  return source;\r\n});\r\n\r\nconst sourceTitle = computed(() => {\r\n  if (!nowPlaying.value) {\r\n    return \"\";\r\n  } else if (sourceLogo.value === \"youtube\") {\r\n    return t(\"SV.LIT_SeeOnYoutube\", {\r\n      title: nowPlaying.value.title,\r\n    });\r\n  } else if (sourceLogo.value === \"apple\") {\r\n    return t(\"SV.MES_AppleMusicPlaying\", {\r\n      title: nowPlaying.value.title,\r\n    });\r\n  } else if (sourceLogo.value === \"spotify\") {\r\n    return t(\"SV.MES_SpotifyPlaying\", { title: nowPlaying.value.title });\r\n  }\r\n});\r\n\r\nfunction getYoutubeLink() {\r\n  const url = store.nowPlaying?.urls[0]?.url;\r\n  if (!url) {\r\n    return null;\r\n  }\r\n  const videoId = getYouTubeID(url || \"\");\r\n  const isUrlValid =\r\n    typeof url === \"string\" ? youtube.isYouTubeURLValid(url) : null;\r\n  if (!videoId && !isUrlValid) {\r\n    throw new CustomError(\r\n      {\r\n        songNumber: store.song?.ccliSongNumber,\r\n        videoUrl: url,\r\n      },\r\n      false,\r\n      `Invalid Youtube Url - ${url}`,\r\n    );\r\n  }\r\n  youtube.isVideoAvailable(url || \"\");\r\n  return `https://www.youtube.com/watch?v=${videoId}`;\r\n}\r\n\r\nconst sourceUrl = computed(() => {\r\n  let source = player.value;\r\n  if (!store.nowPlaying) {\r\n    source = store.determineMediaPlayer(store.mediaItems[0]);\r\n  }\r\n\r\n  if (!nowPlaying.value) {\r\n    return null;\r\n  }\r\n\r\n  if (source === \"youtube\") {\r\n    return getYoutubeLink();\r\n  } else if (source === \"html-audio\") {\r\n    if (\r\n      nowPlaying.value.previewUrl?.includes(\"apple.com\") &&\r\n      nowPlaying.value.urls.find((url) => url.source === \"iTunes\")\r\n    ) {\r\n      return nowPlaying.value.urls.find((url) => url.source === \"iTunes\")?.url;\r\n    }\r\n  } else if (source === \"apple\") {\r\n    return nowPlaying.value.urls.find((url) => url.source === \"iTunes\")?.url;\r\n  } else if (source === \"spotify\") {\r\n    return nowPlaying.value.urls.find((url) => url.source === \"Spotify\")?.url;\r\n  }\r\n  return null;\r\n});\r\n\r\nconst nowPlaying = computed(() => store.nowPlaying || store.mediaItems[0]);\r\n\r\nfunction togglePlay() {\r\n  if (store.nowPlaying) {\r\n    store.togglePlay();\r\n  } else if (store.mediaItems.length) {\r\n    store.playMediaItem(store.mediaItems[0].id);\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div class=\"media-player-expanded\">\r\n    <div class=\"media-player-expanded-inner\">\r\n      <NowPlaying\r\n        v-if=\"!youtube.isFullScreen && !progressBarOnly\"\r\n        class=\"now-playing\"\r\n      />\r\n\r\n      <div\r\n        class=\"now-playing-wrapper\"\r\n        :class=\"{\r\n          'progress-bar-only': progressBarOnly,\r\n        }\"\r\n      >\r\n        <div class=\"controls\">\r\n          <MediaPlayerButton\r\n            id=\"SongDetailsPlaybackTogglePlay\"\r\n            :icon=\"playPauseIcon\"\r\n            :data-status=\"status\"\r\n            :data-title=\"nowPlaying?.title\"\r\n            :data-id=\"nowPlaying?.id\"\r\n            :aria-label=\"playPauseIconLabel\"\r\n            @click=\"togglePlay\"\r\n          />\r\n        </div>\r\n        <div class=\"progress-bar-wrapper\">\r\n          <ProgressBar\r\n            id=\"SongDetailsPlaybackProgressBar\"\r\n            :progress=\"store.progress ?? 0\"\r\n            :preview-mode=\"false\"\r\n            :length-seconds=\"store.duration ?? 0\"\r\n            :preview-length-seconds=\"nowPlaying?.previewLengthSeconds ?? 0\"\r\n            @dragstart=\"onDragStart\"\r\n            @dragmove=\"onDragMove\"\r\n            @dragend=\"onDragEnd\"\r\n          />\r\n          <div\r\n            v-if=\"\r\n              beta.features.fullSongPlayback &&\r\n              !playbackStore.integration &&\r\n              nowPlaying?.urls.find((url) => url.source === 'iTunes')\r\n            \"\r\n            class=\"preview-text preview-text-desktop\"\r\n          >\r\n            {{ $t(\"SV.LIT_PreviewProvidedByAppleMusic\") }}\r\n            <button\r\n              type=\"button\"\r\n              class=\"link\"\r\n              @click=\"modals.showModal('PreferenceModal')\"\r\n            >\r\n              <span v-if=\"enableSpotify\">{{\r\n                $t(\"SV.MES_ConnectWithAppleMusicSpotify\")\r\n              }}</span>\r\n              <span v-else>{{ $t(\"SV.MES_ConnectWithAppleMusic\") }}</span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <template v-if=\"sourceLogo && sourceUrl\">\r\n          <div\r\n            class=\"settings-wrapper\"\r\n            :title=\"sourceTitle\"\r\n          >\r\n            <a\r\n              :href=\"sourceUrl\"\r\n              target=\"_blank\"\r\n              class=\"logo\"\r\n              @click=\"store.pause()\"\r\n            >\r\n              <YoutubeLogo v-if=\"sourceLogo === 'youtube'\" />\r\n              <AppleMusicLogo v-else-if=\"sourceLogo === 'apple'\" />\r\n              <SpotifyLogo v-else-if=\"sourceLogo === 'spotify'\" />\r\n            </a>\r\n          </div>\r\n        </template>\r\n      </div>\r\n    </div>\r\n    <div\r\n      v-if=\"beta.features.fullSongPlayback && !playbackStore.integration\"\r\n      class=\"preview-text preview-text-mobile\"\r\n    >\r\n      {{ $t(\"SV.LIT_PreviewProvidedByAppleMusic\") }}\r\n      <button\r\n        type=\"button\"\r\n        class=\"link\"\r\n        @click=\"modals.showModal('PreferenceModal')\"\r\n      >\r\n        <span v-if=\"enableSpotify\">{{\r\n          $t(\"SV.MES_ConnectWithAppleMusicSpotify\")\r\n        }}</span>\r\n        <span v-else>{{ $t(\"SV.MES_ConnectWithAppleMusic\") }}</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.media-player-expanded {\r\n  @apply bg-black bg-opacity-15 px-5 py-3;\r\n}\r\n.media-player-expanded-inner {\r\n  @apply flex min-h-24 w-full flex-col items-start justify-between gap-2 rounded-none sm:min-h-0 sm:flex-row sm:items-center sm:gap-5;\r\n}\r\n.now-playing-wrapper {\r\n  @apply ms-0 flex w-full flex-1 items-center gap-5;\r\n  &:not(.progress-bar-only) {\r\n    @apply sm:ms-8 xl:ms-20;\r\n  }\r\n}\r\n.now-playing {\r\n  @apply w-full max-w-[350px];\r\n}\r\n.preview-text {\r\n  @apply text-center text-xs opacity-75;\r\n}\r\n\r\n.preview-text-mobile {\r\n  @apply w-full 2xl:hidden;\r\n}\r\n\r\n.preview-text-desktop {\r\n  @apply absolute bottom-0 left-0 right-0 max-2xl:hidden;\r\n}\r\n\r\n.progress-bar-wrapper {\r\n  @apply relative flex-1;\r\n}\r\n\r\n.logo {\r\n  @apply block w-[100px];\r\n}\r\n.settings-wrapper {\r\n  @apply block;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst songStore = useSongStore();\r\nconst store = useMediaPlayerStore();\r\n</script>\r\n\r\n<template>\r\n  <Transition name=\"fade\">\r\n    <div\r\n      v-if=\"!songStore.loading\"\r\n      id=\"MediaPlayer\"\r\n    >\r\n      <SlideTransition :show=\"!!store.nowPlaying\">\r\n        <NowPlayingFull />\r\n      </SlideTransition>\r\n      <div class=\"media-list\">\r\n        <MediaPlayerStickyList />\r\n      </div>\r\n    </div>\r\n  </Transition>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n#MediaPlayer {\r\n  @apply rounded-xl bg-white bg-opacity-5;\r\n}\r\n.media-list {\r\n  @apply p-5 pb-1;\r\n}\r\n.media-player-expanded {\r\n  @apply flex min-h-24 flex-col items-start justify-between gap-2 rounded-none bg-white bg-opacity-5 px-2 py-3 sm:min-h-0 sm:flex-row sm:items-center sm:gap-5 sm:px-5;\r\n}\r\n.now-playing-wrapper {\r\n  @apply ms-0 flex w-full flex-1 items-center gap-2 sm:ms-8 xl:ms-20;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst songStore = useSongStore();\r\nconst store = useMediaPlayerStore();\r\n</script>\r\n\r\n<template>\r\n  <Transition name=\"fade\">\r\n    <div\r\n      v-if=\"!songStore.loading\"\r\n      id=\"MediaPlayer\"\r\n    >\r\n      <SlideTransition :show=\"!!store.nowPlaying\">\r\n        <NowPlayingFull />\r\n      </SlideTransition>\r\n      <div class=\"media-list\">\r\n        <MediaPlayerStickyList />\r\n      </div>\r\n    </div>\r\n  </Transition>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n#MediaPlayer {\r\n  @apply rounded-xl bg-black bg-opacity-25;\r\n}\r\n.media-list {\r\n  @apply p-5 pb-1;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst store = useSongStore();\r\nconst route = useRoute();\r\nconst songNumber = computed(() => route.params.songNumber as string);\r\nconst beta = useBetaStore();\r\n\r\nconst placeholderNotLoaded = computed(() => store.status !== LoadStatus.Ready);\r\nconst placeholderNotAuthorized = computed(\r\n  () =>\r\n    store.status === LoadStatus.Ready &&\r\n    !store.song?.products.general.authorized,\r\n);\r\n\r\nconst enableFullPlaybackFeature = computed(\r\n  () => beta.features.fullSongPlayback,\r\n);\r\n</script>\r\n<template>\r\n  <div class=\"splash-wrapper\">\r\n    <SplashBackground\r\n      v-if=\"store.data?.media.length && store.data?.media[0].artwork\"\r\n      :img-url=\"store.data?.media[0].artwork\"\r\n    />\r\n    <Container>\r\n      <div class=\"flex\">\r\n        <div class=\"flex-1\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <h1>\r\n              <div v-if=\"placeholderNotLoaded\">\r\n                <span\r\n                  class=\"dark placeholder\"\r\n                  style=\"width: 200px\"\r\n                />\r\n              </div>\r\n              <div v-else>{{ store.title }}</div>\r\n            </h1>\r\n            <div>\r\n              <AddToFavorites\r\n                v-if=\"!placeholderNotLoaded\"\r\n                class=\"add-to-fav\"\r\n                on-busy-bg\r\n                :song-number=\"songNumber\"\r\n                :title=\"store.title\"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"meta-data\">\r\n            <div class=\"meta-data-group\">\r\n              <div\r\n                v-if=\"!placeholderNotLoaded\"\r\n                class=\"meta-label\"\r\n              >\r\n                {{ $t(\"S.LIT_Authors\") }}\r\n              </div>\r\n              <div\r\n                v-else\r\n                class=\"meta-label\"\r\n              >\r\n                <span\r\n                  style=\"width: 80px\"\r\n                  class=\"dark placeholder\"\r\n                />\r\n              </div>\r\n              <div\r\n                v-if=\"!placeholderNotLoaded\"\r\n                class=\"meta-value\"\r\n              >\r\n                <router-link\r\n                  v-for=\"(a, i) of store.song?.authors || []\"\r\n                  :key=\"i\"\r\n                  :to=\"`/search/results?${a.searchQuery}`\"\r\n                  class=\"authors link\"\r\n                  >{{ a.label }}</router-link\r\n                >\r\n              </div>\r\n              <div\r\n                v-else\r\n                class=\"meta-value\"\r\n              >\r\n                <span\r\n                  v-for=\"i of 4\"\r\n                  :key=\"i\"\r\n                  class=\"link mr-1 text-lg\"\r\n                  ><span\r\n                    class=\"dark placeholder\"\r\n                    style=\"width: 100px\"\r\n                /></span>\r\n              </div>\r\n            </div>\r\n            <div\r\n              v-if=\"placeholderNotAuthorized || placeholderNotLoaded\"\r\n              class=\"flex items-start gap-5 md:items-center\"\r\n            >\r\n              <div class=\"meta-data-group\">\r\n                <div class=\"meta-label\">\r\n                  <span\r\n                    class=\"dark placeholder\"\r\n                    style=\"width: 80px\"\r\n                  />\r\n                </div>\r\n                <div class=\"meta-value\">\r\n                  <span\r\n                    class=\"dark placeholder\"\r\n                    style=\"width: 100px\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <div class=\"meta-data-group\">\r\n                <div class=\"meta-label\">\r\n                  <span\r\n                    class=\"dark placeholder\"\r\n                    style=\"width: 80px\"\r\n                  />\r\n                </div>\r\n                <div class=\"meta-value\">\r\n                  <span\r\n                    class=\"dark placeholder\"\r\n                    style=\"width: 100px\"\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div\r\n              v-else\r\n              class=\"flex items-start gap-5 md:items-center\"\r\n            >\r\n              <div class=\"meta-data-group\">\r\n                <div class=\"meta-label\">{{ $t(\"S.LIT_SongNumber\") }}</div>\r\n                <div class=\"meta-value\">\r\n                  <span>\r\n                    {{ store.song?.ccliSongNumber }}\r\n                  </span>\r\n                  <CopyIcon\r\n                    v-if=\"store.song?.ccliSongNumber\"\r\n                    id=\"songNumberCopyButton\"\r\n                    :value=\"store.song.ccliSongNumber\"\r\n                    data-user-activity=\"Copied Song Number\"\r\n                    busy-bg\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"meta-data-group\">\r\n                <div class=\"meta-label\">{{ $t(\"SV.LIT_DefaultKey\") }}</div>\r\n                <div class=\"meta-value\">\r\n                  {{ store.song?.defaultKey?.join(\", \") }}\r\n                </div>\r\n                <div\r\n                  v-if=\"!store.song?.defaultKey?.length\"\r\n                  class=\"meta-value\"\r\n                >\r\n                  {{ $t(\"S.LIT_Unknown\") }}\r\n                </div>\r\n              </div>\r\n\r\n              <div\r\n                v-if=\"store.song?.bpm\"\r\n                class=\"meta-data-group\"\r\n              >\r\n                <div class=\"meta-label\">{{ $t(\"SV.LIT_BPM\") }}</div>\r\n                <div class=\"meta-value\">\r\n                  {{ store.song?.bpm }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        v-if=\"store.data?.media && store.data.media.length\"\r\n        class=\"mediaplayer mt-1\"\r\n      >\r\n        <MediaPlayerStickyFullSongPlayback v-if=\"enableFullPlaybackFeature\" />\r\n        <MediaPlayerSticky v-else />\r\n      </div>\r\n    </Container>\r\n  </div>\r\n</template>\r\n<style scoped lang=\"postcss\">\r\n.splash-wrapper {\r\n  @apply relative flex items-center justify-center bg-gray-800 py-2 text-white transition-all;\r\n  min-height: 375px;\r\n}\r\nh1 {\r\n  @apply text-4xl font-bold md:text-5xl;\r\n}\r\n\r\n.authors {\r\n  @apply mr-1 inline;\r\n  &:not(:last-of-type)::after {\r\n    content: \",\";\r\n    @apply no-underline;\r\n  }\r\n  &:hover,\r\n  &:focus-visible {\r\n    @apply bg-transparent brightness-90;\r\n  }\r\n}\r\n.meta-data {\r\n  /*@apply flex items-center gap-x-5 gap-y-3 flex-wrap my-3;*/\r\n  @apply my-2 grid gap-1;\r\n}\r\n.meta-data-group {\r\n  @apply items-center gap-2 md:flex;\r\n}\r\n.meta-label {\r\n  @apply text-sm opacity-75;\r\n}\r\n.meta-value {\r\n  @apply text-lg;\r\n}\r\n.mediaplayer {\r\n  :deep() {\r\n    .album-artwork .content {\r\n      @apply bg-white/10;\r\n    }\r\n  }\r\n}\r\n.splash-wrapper:deep() {\r\n  button.copy-btn {\r\n    i,\r\n    svg {\r\n      @apply text-white;\r\n    }\r\n  }\r\n}\r\n\r\n:deep() {\r\n  .media-list {\r\n    @apply pb-5;\r\n  }\r\n  .scrollbars {\r\n    --scrollbar-fg: rgba(255, 255, 255, 0);\r\n    &:hover,\r\n    &.active {\r\n      --scrollbar-fg: rgba(255, 255, 255, 0.25);\r\n    }\r\n  }\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport recordingIcon from \"@/assets/images/recording-based-icon-white.svg\";\r\nconst store = useSongStore();\r\nconst media = useMediaPlayerStore();\r\nconst route = useRoute();\r\nconst songNumber = computed(() => route.params.songNumber as string);\r\n\r\nconst placeholderNotLoaded = computed(() => store.status !== LoadStatus.Ready);\r\nconst placeholderNotAuthorized = computed(\r\n  () =>\r\n    store.status === LoadStatus.Ready &&\r\n    !store.song?.products.general.authorized,\r\n);\r\n\r\nconst songMedia = computed(() => {\r\n  const songs = store.data?.media.filter((m) => m.type === \"song\");\r\n  if (!songs?.length) {\r\n    return null;\r\n  }\r\n  return songs[0];\r\n});\r\nconst albumArtwork = computed(() => {\r\n  return songMedia.value?.artwork || null;\r\n});\r\nconst bg = computed(() => {\r\n  if (store.data?.media[0]?.artwork) {\r\n    return store.data.media[0].artwork ?? undefined;\r\n  }\r\n  return undefined;\r\n});\r\n\r\nasync function loadSong() {\r\n  await waitUntilTrue(() => store.song);\r\n\r\n  if (store.song?.media.length) {\r\n    await waitUntilTrue(() => store.media.length);\r\n  }\r\n  media.nowPlayingId = \"\";\r\n  // media.nowPlayingId = store.media[0].id;\r\n  //  media.pause();\r\n}\r\nonMounted(loadSong);\r\nwatch(songNumber, loadSong);\r\n</script>\r\n<template>\r\n  <Container class=\"main-container above-fold-splash\">\r\n    <Card\r\n      class=\"wrapper\"\r\n      :background=\"bg\"\r\n      background-alt=\"Background Image\"\r\n    >\r\n      <div class=\"splash-wrapper\">\r\n        <div class=\"items-center gap-10 md:flex\">\r\n          <div\r\n            v-if=\"store.status !== LoadStatus.Ready || !!albumArtwork\"\r\n            class=\"album-artwork-wrapper max-md:hidden\"\r\n          >\r\n            <span\r\n              v-if=\"store.status !== LoadStatus.Ready\"\r\n              class=\"dark placeholder aspect-square h-full w-full\"\r\n            />\r\n            <AlbumArtwork\r\n              v-else-if=\"albumArtwork\"\r\n              :url=\"albumArtwork\"\r\n              :alt=\"store.title\"\r\n              :restrict-width=\"250\"\r\n            />\r\n          </div>\r\n          <div class=\"flex-1\">\r\n            <div class=\"mt-5 flex items-center gap-2\">\r\n              <div\r\n                v-if=\"albumArtwork\"\r\n                class=\"album-artwork-wrapper md:hidden\"\r\n              >\r\n                <AlbumArtwork\r\n                  :url=\"albumArtwork\"\r\n                  :alt=\"store.title\"\r\n                  :restrict-width=\"250\"\r\n                />\r\n              </div>\r\n              <h1>\r\n                <div v-if=\"placeholderNotLoaded\">\r\n                  <span\r\n                    class=\"dark placeholder\"\r\n                    style=\"width: 200px\"\r\n                  />\r\n                </div>\r\n                <div v-else>{{ store.title }}</div>\r\n              </h1>\r\n              <div>\r\n                <AddToFavorites\r\n                  v-if=\"!placeholderNotLoaded\"\r\n                  class=\"add-to-fav\"\r\n                  on-busy-bg\r\n                  :song-number=\"songNumber\"\r\n                  :title=\"store.title\"\r\n                />\r\n              </div>\r\n              <div\r\n                class=\"based-on-recording-badge\"\r\n                :title=\"$t('SV.LIT_BasedOnRecording')\"\r\n              >\r\n                <!-- <img\r\n                  :src=\"recordingIcon\"\r\n                  alt=\"Recording Icon\"\r\n                  class=\"based-on-recording-icon\"\r\n                /> -->\r\n                <i\r\n                  class=\"based-on-recording-icon fa-light fa-microphone-stand fa-xl\"\r\n                />\r\n                <div class=\"based-on-recording-text\">\r\n                  {{ $t(\"SV.LIT_BasedOnRecording\") }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"meta-data\">\r\n              <div class=\"flex flex-wrap items-center gap-5\">\r\n                <div class=\"meta-data-group\">\r\n                  <div\r\n                    v-if=\"!placeholderNotLoaded\"\r\n                    class=\"meta-label\"\r\n                  >\r\n                    {{ $t(\"S.LIT_Album\") }}\r\n                  </div>\r\n                  <div\r\n                    v-else\r\n                    class=\"meta-label\"\r\n                  >\r\n                    <span\r\n                      style=\"width: 80px\"\r\n                      class=\"dark placeholder\"\r\n                    />\r\n                  </div>\r\n                  <div\r\n                    v-if=\"!placeholderNotLoaded\"\r\n                    class=\"meta-value\"\r\n                  >\r\n                    <span class=\"authors\">{{ store.song?.album }}</span>\r\n                  </div>\r\n                  <div\r\n                    v-else\r\n                    class=\"meta-value\"\r\n                  >\r\n                    <span\r\n                      class=\"dark placeholder\"\r\n                      style=\"width: 100px\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n                <div class=\"meta-data-group\">\r\n                  <div\r\n                    v-if=\"!placeholderNotLoaded\"\r\n                    class=\"meta-label\"\r\n                  >\r\n                    {{ $t(\"SV.LIT_Artist\") }}\r\n                  </div>\r\n                  <div\r\n                    v-else\r\n                    class=\"meta-label\"\r\n                  >\r\n                    <span\r\n                      style=\"width: 80px\"\r\n                      class=\"dark placeholder\"\r\n                    />\r\n                  </div>\r\n                  <div\r\n                    v-if=\"!placeholderNotLoaded\"\r\n                    class=\"meta-value\"\r\n                  >\r\n                    <span class=\"authors\">{{ store.song?.artist }}</span>\r\n                  </div>\r\n                  <div\r\n                    v-else\r\n                    class=\"meta-value\"\r\n                  >\r\n                    <span\r\n                      v-for=\"i of 4\"\r\n                      :key=\"i\"\r\n                      class=\"link mr-1 text-lg\"\r\n                      ><span\r\n                        class=\"dark placeholder\"\r\n                        style=\"width: 100px\"\r\n                    /></span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div\r\n                v-if=\"placeholderNotAuthorized || placeholderNotLoaded\"\r\n                class=\"flex items-start gap-5 md:items-center\"\r\n              >\r\n                <div class=\"meta-data-group\">\r\n                  <div class=\"meta-label\">\r\n                    <span\r\n                      class=\"dark placeholder\"\r\n                      style=\"width: 80px\"\r\n                    />\r\n                  </div>\r\n                  <div class=\"meta-value\">\r\n                    <span\r\n                      class=\"dark placeholder\"\r\n                      style=\"width: 100px\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n                <div class=\"meta-data-group\">\r\n                  <div class=\"meta-label\">\r\n                    <span\r\n                      class=\"dark placeholder\"\r\n                      style=\"width: 80px\"\r\n                    />\r\n                  </div>\r\n                  <div class=\"meta-value\">\r\n                    <span\r\n                      class=\"dark placeholder\"\r\n                      style=\"width: 100px\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div\r\n                v-else\r\n                class=\"flex items-start gap-5 md:items-center\"\r\n              >\r\n                <div class=\"meta-data-group\">\r\n                  <div class=\"meta-label\">{{ $t(\"S.LIT_SongNumber\") }}</div>\r\n                  <div class=\"meta-value\">\r\n                    <span>\r\n                      {{ store.song?.ccliSongNumber }}\r\n                    </span>\r\n                    <CopyIcon\r\n                      v-if=\"store.song?.ccliSongNumber\"\r\n                      id=\"songNumberCopyButton\"\r\n                      :value=\"store.song.ccliSongNumber\"\r\n                      data-user-activity=\"Copied Song Number\"\r\n                      busy-bg\r\n                    />\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"meta-data-group\">\r\n                  <div class=\"meta-label\">{{ $t(\"SV.LIT_DefaultKey\") }}</div>\r\n                  <div class=\"meta-value\">\r\n                    {{ store.song?.defaultKey?.join(\", \") }}\r\n                  </div>\r\n                  <div\r\n                    v-if=\"!store.song?.defaultKey?.length\"\r\n                    class=\"meta-value\"\r\n                  >\r\n                    {{ $t(\"S.LIT_Unknown\") }}\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  v-if=\"store.song?.bpm\"\r\n                  class=\"meta-data-group\"\r\n                >\r\n                  <div class=\"meta-label\">{{ $t(\"SV.LIT_BPM\") }}</div>\r\n                  <div class=\"meta-value\">\r\n                    {{ store.song?.bpm }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div\r\n              v-if=\"store.status !== LoadStatus.Ready\"\r\n              class=\"sound-sample-placeholder dark placeholder\"\r\n            ></div>\r\n            <NowPlayingFull\r\n              v-else\r\n              progress-bar-only\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Card>\r\n  </Container>\r\n</template>\r\n<style scoped lang=\"postcss\">\r\n.main-container {\r\n  @apply mb-0 pb-0;\r\n}\r\n.wrapper {\r\n  @apply bg-gray-800 shadow-none;\r\n  :deep() {\r\n    .card-body {\r\n      @apply bg-transparent;\r\n    }\r\n    .bg-img img {\r\n      @apply rotate-180 scale-[200%] blur-2xl brightness-75;\r\n    }\r\n  }\r\n}\r\n.splash-wrapper {\r\n  @apply relative text-white transition-all;\r\n}\r\nh1 {\r\n  @apply text-4xl font-bold md:text-5xl;\r\n}\r\n\r\n.authors {\r\n  @apply mr-1 inline;\r\n  &:not(:last-of-type)::after {\r\n    content: \",\";\r\n    @apply no-underline;\r\n  }\r\n  &:hover,\r\n  &:focus-visible {\r\n    @apply bg-transparent brightness-90;\r\n  }\r\n}\r\n.meta-data {\r\n  /*@apply flex items-center gap-x-5 gap-y-3 flex-wrap my-3;*/\r\n  @apply my-3 grid gap-3;\r\n}\r\n.meta-data-group {\r\n  @apply items-center gap-2 md:flex;\r\n}\r\n.meta-label {\r\n  @apply text-sm opacity-75;\r\n}\r\n.meta-value {\r\n  @apply text-lg;\r\n  :deep() {\r\n  }\r\n}\r\n.mediaplayer {\r\n  :deep() {\r\n    .album-artwork .content {\r\n      @apply bg-white/10;\r\n    }\r\n  }\r\n}\r\n.album-artwork-wrapper {\r\n  @apply h-24 w-24 md:h-[250px] md:w-[250px];\r\n}\r\n.splash-wrapper:deep() {\r\n  button.copy-btn {\r\n    i,\r\n    svg {\r\n      @apply text-white;\r\n    }\r\n  }\r\n}\r\n.placeholder.sound-sample-placeholder {\r\n  @apply h-[56px] w-full rounded-xl opacity-10;\r\n}\r\n:deep(.media-player-expanded) {\r\n  @apply rounded-xl;\r\n}\r\n.based-on-recording-badge {\r\n  @apply ml-auto block h-12 shrink-0 items-center gap-0 rounded-xl bg-black/25 p-2 px-4 xl:flex;\r\n  .based-on-recording-icon {\r\n    @apply xl:mr-4;\r\n  }\r\n  .based-on-recording-text {\r\n    @apply max-w-[75px] shrink-0 text-xs font-bold uppercase tracking-wider max-xl:hidden;\r\n  }\r\n}\r\n</style>\r\n","export const useRecentStore = defineStore(\"recent\", () => {\r\n  const profile = useProfileStore();\r\n  const songNumbers = useLocalStorage<string[]>(\r\n    \"recent-song-numbers-viewed\",\r\n    [],\r\n  );\r\n\r\n  function onViewSongNumber(songNumber: string) {\r\n    if (!profile.profile?.signedIn) {\r\n      return;\r\n    }\r\n    const index = songNumbers.value.findIndex((s) => s === songNumber);\r\n    if (index >= 0) {\r\n      songNumbers.value.splice(index, 1);\r\n    }\r\n    songNumbers.value.unshift(songNumber);\r\n  }\r\n\r\n  return {\r\n    songNumbers,\r\n    onViewSongNumber,\r\n  };\r\n});\r\n","<script setup lang=\"ts\">\r\nimport { LoadStatus } from \"@/models/frontend-only/LoadStatus\";\r\nconst Error = defineAsyncComponent(() => import(\"@/components/Error.vue\"));\r\nconst NotFound = defineAsyncComponent(() => import(\"@/pages/NotFound.vue\"));\r\n\r\nconst { t } = useI18n();\r\nconst recent = useRecentStore();\r\nconst route = useRoute();\r\nconst mediaStore = useMediaPlayerStore();\r\nconst translations = useTranslationStore();\r\nconst store = useSongStore();\r\nconst appStore = useAppStore();\r\nconst r = useRoute();\r\nconst songNumber = computed(() => r.params.songNumber as string);\r\nconst numberRegex = /^[0-9]+$/;\r\nconst validSongNumber = computed(() => numberRegex.test(songNumber.value));\r\nconst fullPath = computed(() => r.fullPath as string);\r\nconst status = ref<LoadStatus>(LoadStatus.Loading);\r\nconst slug = computed(() => r.params.slug as string);\r\nconst translationCode = computed(() => {\r\n  return translations.currentLanguageCode;\r\n});\r\n\r\nasync function updatePageTitleAndDescription() {\r\n  const authors = store.song?.authors.map((i) => i.label).join(\", \");\r\n  const artist = store.song?.artist;\r\n  const title = store.song?.title;\r\n  let pageTitle = \"\";\r\n  let description = \"\";\r\n\r\n  if (fullPath.value.includes('/viewlyrics')) {\r\n    pageTitle = artist ? t(\"S.LIT_LyricsPageTitle\", [title, artist]) : t(\"S.LIT_LyricsPageTitle\", [title, authors]);\r\n    description = artist ? t(\"S.LIT_PageDescriptionSEO_LyricsForTitleByAuthor\",[title, artist]) : t(\"S.LIT_PageDescriptionSEO_LyricsForTitleByAuthor\",[title,authors]);\r\n  } else if (fullPath.value.includes('/viewchordsheet')) {\r\n    pageTitle = artist ? t(\"S.LIT_ChordSheetPageTitle\", [title, artist]) : t(\"S.LIT_ChordSheetPageTitle\", [title, authors]);\r\n    description = artist ? t(\"S.LIT_PageDescriptionSEO_ChordsForTitleByAuthor\",[title, artist]) : t(\"S.LIT_PageDescriptionSEO_ChordsForTitleByAuthor\",[title,authors]);\r\n  } else if (fullPath.value.includes('/viewleadsheet')) {\r\n    pageTitle = artist ? t(\"S.LIT_LeadSheetPageTitle\", [title, artist]) : t(\"S.LIT_LeadSheetPageTitle\", [title, authors]);\r\n    description = artist ? t(\"S.LIT_PageDescriptionSEO_LeadSheetForTitleByAuthor\",[title, artist]) : t(\"S.LIT_PageDescriptionSEO_LeadSheetForTitleByAuthor\",[title,authors]);\r\n  } else if (fullPath.value.includes('/viewvocalsheet')) {\r\n    pageTitle = artist ? t(\"S.LIT_VocalSheetPageTitle\", [title, artist]) : t(\"S.LIT_VocalSheetPageTitle\", [title, authors]);\r\n    description = artist ? t(\"S.LIT_PageDescriptionSEO_VocalSheetForTitleByAuthor\",[title, artist]) : t(\"S.LIT_PageDescriptionSEO_VocalSheetForTitleByAuthor\",[title,authors]);\r\n  } else {\r\n    updatePageTitle();\r\n    return;\r\n  }\r\n  appStore.updateTitleAndDescription({\r\n    title: pageTitle,\r\n    description: description,\r\n  });\r\n}\r\n\r\nfunction updatePageTitle() {\r\n  const { title, artist, products } = store.song || {};\r\n  const hasLyrics = products?.lyrics.exists;\r\n  const hasChords = products?.chords.exists;\r\n  const hasSheet = products?.lead.exists || products?.vocal.exists;\r\n  let pageTitle = \"\";\r\n\r\n  if (!title) {\r\n    pageTitle = t(\"S.PageTabTitle\");\r\n  } else {\r\n    if (artist) {\r\n      pageTitle = `${title} | ${t(\"S.LIT_PageTitleSEO_ChordsLyricsSheetMusicByArtist\", [artist])}`;\r\n    } else {\r\n      const titleKey = hasChords\r\n        ? hasLyrics\r\n          ? hasSheet\r\n            ? t(\"S.LIT_PageTitleSEO_SongWithChordsLyricsAndSheetMusic\")\r\n            : t(\"S.LIT_PageTitleSEO_SongWithChordsAndLyrics\")\r\n          : hasSheet\r\n          ? t(\"S.LIT_PageTitleSEO_SongWithChordsAndSheetMusic\")\r\n          : t(\"S.LIT_PageTitleSEO_SongWithChords\")\r\n        : hasLyrics\r\n        ? hasSheet\r\n          ? t(\"S.LIT_PageTitleSEO_SongWithLyricsAndSheetMusic\")\r\n          : t(\"S.LIT_PageTitleSEO_SongWithLyrics\")\r\n        : t(\"S.LIT_PageTitleSEO_SongWithSheetMusic\");\r\n\r\n      pageTitle = `${title}  ${titleKey}`;\r\n    }\r\n  }\r\n  appStore.updateTitle(pageTitle);\r\n}\r\n\r\nwatch(songNumber, loadSong);\r\nwatch(slug, loadSong);\r\nwatch(fullPath, updatePageTitleAndDescription)\r\nwatch(translationCode, () => {\r\n  setTimeout(() => {\r\n    updatePageTitleAndDescription();\r\n  }, 50)\r\n})\r\n\r\nasync function loadSong() {\r\n  if (!validSongNumber.value) {\r\n    return;\r\n  }\r\n\r\n  recent.onViewSongNumber(songNumber.value);\r\n  await store.getSongDetails(songNumber.value, slug.value);\r\n  store.updateSongdetailsMeta();\r\n  if (!r.params.slug && store.song?.slug && songNumber.value) {\r\n    router.replace(`/songs/${songNumber.value}/${store.song.slug}`);\r\n  }\r\n\r\n  (window as any).dataLayer.push({\r\n    song_number: songNumber.value,\r\n  });\r\n  updatePageTitleAndDescription()\r\n}\r\n\r\nonMounted(() => {\r\n  try {\r\n    loadSong();\r\n    status.value = LoadStatus.Ready;\r\n  } catch {\r\n    status.value = LoadStatus.Error;\r\n  }\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n  pausePlayingMusic();\r\n  store.song = null;\r\n});\r\n\r\nfunction pausePlayingMusic() {\r\n  mediaStore.pause();\r\n  if (\r\n    mediaStore.status !== MediaPlayerStatus.Unloaded &&\r\n    mediaStore.status !== MediaPlayerStatus.Paused\r\n  ) {\r\n    mediaStore.pause();\r\n  }\r\n}\r\nwatch(songNumber, pausePlayingMusic);\r\nonDeactivated(pausePlayingMusic);\r\n\r\nconst beta = useBetaStore();\r\nconst enableRecordingFocus = computed(() => beta.features.recordingFocusLayout);\r\n</script>\r\n\r\n<template>\r\n  <NotFound v-if=\"store.songNotFound || !validSongNumber\" />\r\n  <Error v-else-if=\"store.status === LoadStatus.Error\" />\r\n  <div v-else>\r\n    <main>\r\n      <AboveFoldSplashRecordingFocused\r\n        v-if=\"enableRecordingFocus && store.song?.enableSongVersion\"\r\n      />\r\n      <AboveFoldSplash v-else />\r\n\r\n      <div class=\"below-splash\">\r\n        <Container class=\"-mb-5\">\r\n          <NavProducts />\r\n        </Container>\r\n        <RouterView v-slot=\"{ Component, route }\">\r\n          <component\r\n            :is=\"Component\"\r\n            :key=\"route.path\"\r\n          />\r\n        </RouterView>\r\n      </div>\r\n    </main>\r\n    <!-- <DiscoverMoreSongs class=\"d-none\" /> -->\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n"],"file":"assets/SongTemplate-B71bAkow.js"}