{"version":3,"file":"General-CHAol9J4.js","sources":["../../Vue/src/components/General/SectionLyricVideo.vue","../../Vue/src/components/General/SectionMedia.vue","../../Vue/src/components/General/SectionAdministrators.vue","../../Vue/src/components/General/SectionCopyrights.vue","../../Vue/src/components/General/SectionCatalogs.vue","../../Vue/src/components/General/SectionTranslations.vue","../../Vue/src/components/General/SectionThemes.vue","../../Vue/src/components/General/SectionAuthors.vue","../../Vue/src/components/General/SectionLyrics.vue","../../Vue/src/components/General/SectionNoAvailableContent.vue","../../Vue/src/pages/General.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { SSLyricVideoIndex } from \"@/models/frontend-only/LyricVideos\";\r\n\r\nconst store = useSongStore();\r\ndefineProps<{\r\n  data: SSLyricVideoIndex | null;\r\n}>();\r\n</script>\r\n\r\n<template>\r\n  <section v-if=\"data\">\r\n    <SectionTitle :placeholder=\"store.placeholderNotLoaded\"\r\n      >Related Lyric Video\r\n      <span class=\"text-xs font-bold uppercase italic text-primary\"\r\n        >Beta</span\r\n      ></SectionTitle\r\n    >\r\n\r\n    <router-link :to=\"`/lyric-videos/videos/${data.videoId}`\">\r\n      <LVThumbnail\r\n        :title=\"data.title\"\r\n        :song-length-seconds=\"data.duration\"\r\n        :tag=\"data.tags\"\r\n        :force-background-index=\"data.slideBackground\"\r\n      />\r\n      <div class=\"py-1 font-display font-semibold uppercase text-primary\">\r\n        View Video <i class=\"fa-light fa-chevron-right\" />\r\n      </div>\r\n    </router-link>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nconst store = useSongStore();\r\nconst items = computed(() =>\r\n  store.song?.media.filter((m) => m.type === \"video\" && m.artwork).slice(0, 2),\r\n);\r\nconst playingIndex = ref(-1);\r\nonMounted(() => {\r\n  emitter.on(\"youtubeVideoEnded\", onYoutubeVideoEnd);\r\n});\r\nonBeforeUnmount(() => {\r\n  emitter.off(\"youtubeVideoEnded\", onYoutubeVideoEnd);\r\n});\r\n\r\nfunction onYoutubeVideoEnd() {\r\n  playingIndex.value = -1;\r\n}\r\nfunction onClick(ind: number) {\r\n  playingIndex.value = ind;\r\n}\r\n</script>\r\n\r\n<template>\r\n  <section v-if=\"store.status !== LoadStatus.Ready || items?.length\">\r\n    <div class=\"section-title-wrapper\">\r\n      <SectionTitle\r\n        ><span v-if=\"store.status === LoadStatus.Ready\">Youtube Videos</span\r\n        ><span\r\n          v-else\r\n          class=\"placeholder\"\r\n          style=\"width: 100px\"\r\n      /></SectionTitle>\r\n    </div>\r\n    <div class=\"flex flex-wrap items-center gap-4\">\r\n      <template v-if=\"store.status === LoadStatus.Ready\">\r\n        <template\r\n          v-for=\"(i, ind) of items\"\r\n          :key=\"ind\"\r\n        >\r\n          <button\r\n            v-if=\"playingIndex !== ind\"\r\n            type=\"button\"\r\n            class=\"media-item\"\r\n            @click=\"onClick(ind)\"\r\n          >\r\n            <div class=\"relative\">\r\n              <AlbumArtwork\r\n                media-type=\"video\"\r\n                :url=\"i.artwork || undefined\"\r\n                :alt=\"i.title\"\r\n                class=\"thumbnail\"\r\n              />\r\n              <div class=\"artwork-hover\">\r\n                <FAIcon class=\"fa-solid fa-play\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"text-left\">{{ i.title }}</div>\r\n          </button>\r\n          <div\r\n            v-else\r\n            class=\"media-item\"\r\n          >\r\n            <div class=\"youtube-wrapper\">\r\n              <FAIcon class=\"fa-spin fa-spinner-third fa-solid busy-icon\" />\r\n              <YouTubePlayer\r\n                :src=\"i.urls[0].url\"\r\n                :thumbnail=\"i.artwork\"\r\n                :alt=\"i.title\"\r\n                class=\"yt-player\"\r\n              />\r\n            </div>\r\n            <div class=\"text-left\">{{ i.title }}</div>\r\n          </div>\r\n        </template>\r\n      </template>\r\n      <template v-else>\r\n        <div class=\"placeholder aspect-video\" />\r\n        <div class=\"placeholder aspect-video\" />\r\n      </template>\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.media-item {\r\n  @apply relative aspect-video h-full w-full max-w-[350px] transition-all;\r\n  &:hover,\r\n  &:focus-visible {\r\n    @apply brightness-75;\r\n  }\r\n}\r\n.artwork-hover {\r\n  @apply absolute bottom-5 left-5 right-5 top-5 flex items-end justify-end text-white;\r\n  :deep() {\r\n    i,\r\n    svg {\r\n      @apply text-2xl shadow;\r\n    }\r\n  }\r\n}\r\n.youtube-wrapper {\r\n  @apply relative aspect-video h-full w-full overflow-hidden rounded-lg bg-gray-300;\r\n}\r\n\r\n.busy-icon {\r\n  @apply absolute text-white;\r\n  left: 50%;\r\n  top: 50%;\r\n  font-size: 2em;\r\n  margin-left: -0.5em;\r\n  margin-top: -0.5em;\r\n  z-index: 0;\r\n}\r\n:deep() {\r\n  .yt-player {\r\n    @apply absolute bottom-0 left-0 right-0 top-0 z-10;\r\n  }\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { LoadStatus } from \"@/models/frontend-only/LoadStatus\";\r\n\r\nconst store = useSongStore();\r\nconst song = computed(() => store.data);\r\n\r\nconst shown = computed(() => {\r\n  if (\r\n    store.status === LoadStatus.Ready &&\r\n    store.song?.products.general.authorized &&\r\n    !store.song?.administrators?.length\r\n  ) {\r\n    return false;\r\n  }\r\n  return true;\r\n});\r\n</script>\r\n\r\n<template>\r\n  <section v-if=\"shown\">\r\n    <SectionTitle :placeholder=\"store.placeholderNotLoaded\">{{\r\n      $t(\"G.LIT_Administrators\")\r\n    }}</SectionTitle>\r\n    <div\r\n      v-if=\"store.placeholderNotAuthorized\"\r\n      :class=\"{ 'placeholder-glow': store.loading }\"\r\n    >\r\n      <Placeholder\r\n        :lines=\"2\"\r\n        full-width\r\n      />\r\n    </div>\r\n    <div v-else-if=\"song?.administrators\">\r\n      {{ song.administrators.join(\", \") }}\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nconst store = useSongStore();\r\nconst copyrights = computed(() => store.data?.copyrights);\r\n</script>\r\n\r\n<template>\r\n  <section>\r\n    <SectionTitle :placeholder=\"store.placeholderNotLoaded\">\r\n      {{ $t(\"G.LIT_Copyrights\") }}\r\n      <CopyIcon\r\n        v-if=\"copyrights && !store.placeholderNotAuthorized\"\r\n        :value=\"copyrights\"\r\n        class=\"-mb-4\"\r\n        id=\"generalCopyCopyrightsButton\"\r\n        data-user-activity=\"Copied Copyrights\"\r\n      />\r\n    </SectionTitle>\r\n    <div v-if=\"store.placeholderNotAuthorized\">\r\n      <Placeholder\r\n        :lines=\"2\"\r\n        full-width\r\n      />\r\n    </div>\r\n    <div v-else-if=\"copyrights\">\r\n      {{ copyrights }}\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nconst store = useSongStore();\r\nconst catalogs = computed(() => store.data?.catalogs);\r\n\r\nconst shown = computed(() => {\r\n  if (\r\n    store.status === LoadStatus.Ready &&\r\n    store.song?.products.general.authorized &&\r\n    !store.song?.catalogs?.length\r\n  ) {\r\n    return false;\r\n  }\r\n  return true;\r\n});\r\n</script>\r\n\r\n<template>\r\n  <section v-if=\"shown\">\r\n    <SectionTitle :placeholder=\"store.placeholderNotLoaded\">{{\r\n      $t(\"G.LIT_Catalogs\")\r\n    }}</SectionTitle>\r\n    <div\r\n      v-if=\"store.placeholderNotAuthorized\"\r\n      :class=\"{ 'placeholder-glow': store.loading }\"\r\n    >\r\n      <Placeholder\r\n        :min-width=\"145\"\r\n        :max-width=\"250\"\r\n      />\r\n    </div>\r\n    <div v-else>\r\n      <div\r\n        v-for=\"(c, i) of catalogs\"\r\n        :key=\"i\"\r\n      >\r\n        <router-link\r\n          :to=\"`/search/results?${c.searchQuery}`\"\r\n          class=\"link text-primary\"\r\n          >{{ c.label }}</router-link\r\n        >\r\n      </div>\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nconst store = useSongStore();\r\nconst song = computed(() => store.data);\r\nconst translations = computed(() => song.value?.translations);\r\nconst status = computed(() => store.status);\r\n\r\nconst shown = computed(() => {\r\n  if (\r\n    status.value === LoadStatus.Ready &&\r\n    store.song?.products.general.authorized &&\r\n    !song.value?.translations?.length\r\n  ) {\r\n    return false;\r\n  }\r\n  return true;\r\n});\r\n</script>\r\n\r\n<template>\r\n  <section\r\n    class=\"col-12 col-sm-6\"\r\n    v-if=\"shown\"\r\n  >\r\n    <SectionTitle :placeholder=\"store.placeholderNotLoaded\">{{\r\n      $t(\"S.LIT_Translations\")\r\n    }}</SectionTitle>\r\n    <div v-if=\"store.placeholderNotAuthorized\">\r\n      <Placeholder\r\n        :min-width=\"100\"\r\n        :max-width=\"250\"\r\n      />\r\n    </div>\r\n    <div v-else>\r\n      <div\r\n        v-for=\"(t, i) of translations\"\r\n        :key=\"i\"\r\n      >\r\n        <router-link\r\n          :to=\"`/songs/${t.songNumber}/${t.slug}`\"\r\n          class=\"link text-primary\"\r\n          >{{ t.title }} ({{ t.language }})</router-link\r\n        >\r\n      </div>\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nimport { LoadStatus } from \"@/models/frontend-only/LoadStatus\";\r\n\r\nconst store = useSongStore();\r\n\r\nconst shown = computed(() => {\r\n  if (\r\n    store.status === LoadStatus.Ready &&\r\n    store.song?.products.general.authorized &&\r\n    !store.song?.themes?.length\r\n  ) {\r\n    return false;\r\n  }\r\n  return true;\r\n});\r\n</script>\r\n\r\n<template>\r\n  <section v-if=\"shown\">\r\n    <SectionTitle :placeholder=\"store.placeholderNotLoaded\">{{\r\n      $t(\"S.LIT_Themes\")\r\n    }}</SectionTitle>\r\n    <div v-if=\"store.placeholderNotAuthorized\">\r\n      <span\r\n        class=\"placeholder me-3\"\r\n        style=\"width: 100px; height: 20px; border-radius: 0.25em\"\r\n      />\r\n      <span\r\n        class=\"placeholder me-3\"\r\n        style=\"width: 100px; height: 20px; border-radius: 0.25em\"\r\n      />\r\n      <span\r\n        class=\"placeholder me-3\"\r\n        style=\"width: 100px; height: 20px; border-radius: 0.25em\"\r\n      />\r\n      <span\r\n        class=\"placeholder me-3\"\r\n        style=\"width: 100px; height: 20px; border-radius: 0.25em\"\r\n      />\r\n    </div>\r\n\r\n    <div v-else>\r\n      <ThemeTag\r\n        v-for=\"(t, i) of store.data?.themes\"\r\n        :key=\"i\"\r\n        :value=\"t\"\r\n      />\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nimport { LoadStatus } from \"@/models/frontend-only/LoadStatus\";\r\n\r\nconst store = useSongStore();\r\n</script>\r\n\r\n<template>\r\n  <section>\r\n    <SectionTitle :placeholder=\"store.placeholderNotLoaded\">{{\r\n      $t(\"S.LIT_Authors\")\r\n    }}</SectionTitle>\r\n    <div v-if=\"store.song\">\r\n      <template\r\n        v-for=\"(a, i) of store.song.authors || []\"\r\n        :key=\"i\"\r\n      >\r\n        <router-link\r\n          :to=\"`/search/results?${a.searchQuery}`\"\r\n          class=\"authors link\"\r\n          >{{ a.label }}</router-link\r\n        >\r\n        <span v-if=\"i !== store.song!.authors.length - 1\">, </span>\r\n      </template>\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\ndefineProps<{ forcePreview?: boolean }>();\r\nconst store = useSongStore();\r\nconst song = computed(() => store.data);\r\nconst showAllLyrics = ref(false);\r\nconst { t } = useI18n();\r\n\r\nconst sectionTitle = computed(() => {\r\n  if (!song.value) {\r\n    return t(\"S.LIT_Lyrics\");\r\n  }\r\n\r\n  if (!song.value.lyrics?.length) {\r\n    return t(\"S.LIT_LyricsPreview\");\r\n  }\r\n\r\n  return t(\"S.LIT_Lyrics\");\r\n});\r\n\r\nfunction onCopyLyrics() {\r\n  store.onLyricsActivityDebounced(\"copied\");\r\n\r\n  (window as any).dataLayer = (window as any).dataLayer || [];\r\n  (window as any).dataLayer.push({\r\n    event: \"userLyricsCopy\",\r\n    song_number: song.value?.ccliSongNumber,\r\n  });\r\n\r\n  // Clear out event variables\r\n  (window as any).dataLayer.push({\r\n    song_number: undefined,\r\n  });\r\n}\r\n\r\nconst noLyrics = computed(() => {\r\n  if (!song.value) {\r\n    return false;\r\n  }\r\n  return !song.value.products.lyrics.exists;\r\n});\r\n</script>\r\n\r\n<template>\r\n  <section>\r\n    <SectionTitle :placeholder=\"store.placeholderNotLoaded\">\r\n      {{ sectionTitle }}\r\n      <CopyIcon\r\n        v-if=\"song && song.lyrics?.length && !store.placeholderNotAuthorized\"\r\n        id=\"generalCopyLyricsButton\"\r\n        :value=\"store.copyLyricsContent\"\r\n        data-user-activity=\"Copied Lyrics\"\r\n        @click=\"onCopyLyrics\"\r\n      />\r\n    </SectionTitle>\r\n    <div\r\n      v-if=\"store.placeholderNotAuthorized\"\r\n      class=\"lyrics-provided\"\r\n    >\r\n      <div\r\n        class=\"lg:block\"\r\n        :class=\"showAllLyrics ? 'block' : 'hidden'\"\r\n      >\r\n        <div\r\n          v-for=\"l of 3\"\r\n          :key=\"'placeholder' + l\"\r\n          class=\"lyric-section\"\r\n        >\r\n          <h3>\r\n            <span\r\n              class=\"placeholder\"\r\n              style=\"width: 100px\"\r\n            />\r\n          </h3>\r\n          <Placeholder />\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        v-if=\"song?.lyricsPreview\"\r\n        class=\"lyric-section lg:hidden\"\r\n        :class=\"{ hidden: showAllLyrics }\"\r\n      >\r\n        <Placeholder />\r\n      </div>\r\n    </div>\r\n    <div\r\n      v-else-if=\"song?.lyrics?.length\"\r\n      class=\"lyrics-provided\"\r\n      @copy=\"onCopyLyrics\"\r\n    >\r\n      <div\r\n        :class=\"{\r\n          'lg:block': !forcePreview,\r\n          hidden: !showAllLyrics,\r\n        }\"\r\n      >\r\n        <div\r\n          v-for=\"(l, i) of song.lyrics\"\r\n          :key=\"i\"\r\n          class=\"lyric-section\"\r\n        >\r\n          <h3>{{ l.partLabel }}</h3>\r\n          <div\r\n            v-for=\"(ll, ii) of l.lyrics.split('|')\"\r\n            :key=\"i + 'l' + ii\"\r\n          >\r\n            {{ ll }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        v-if=\"song?.lyricsPreview\"\r\n        class=\"lyric-section\"\r\n        :class=\"{\r\n          hidden: showAllLyrics,\r\n          'lg:hidden': !forcePreview,\r\n        }\"\r\n      >\r\n        <div\r\n          v-for=\"(l, i) of (song.lyricsPreview as string)\r\n            .split('|')\r\n            .map((l) => l.trim())\"\r\n          :key=\"i\"\r\n        >\r\n          {{ l }}\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"link text-primary\"\r\n          @click.stop.prevent=\"showAllLyrics = true\"\r\n        >\r\n          {{ $t(\"SV.LIT_ShowAllLyrics\") }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div\r\n      v-else-if=\"song?.lyricsPreview\"\r\n      class=\"lyric-section\"\r\n    >\r\n      <div\r\n        v-for=\"(l, i) of (song.lyricsPreview as string)\r\n          .split('|')\r\n          .map((l) => l.trim())\"\r\n        :key=\"i\"\r\n      >\r\n        {{ l }}\r\n      </div>\r\n    </div>\r\n    <div v-if=\"noLyrics\">{{ $t(\"S.MES_SorryWeDontHaveLyrics\") }}</div>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\nh3 {\r\n  @apply text-lg font-semibold;\r\n}\r\n.lyric-section {\r\n  @apply mb-3;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { LoadStatus } from \"@/models/frontend-only/LoadStatus\";\r\n\r\nconst store = useSongStore();\r\nconst shown = computed(() => {\r\n  if (store.status !== LoadStatus.Ready) {\r\n    return false;\r\n  }\r\n\r\n  if (!store.song) {\r\n    return false;\r\n  }\r\n\r\n  const products = store.song.products;\r\n\r\n  return (\r\n    !products.chords.exists &&\r\n    !products.lyrics.exists &&\r\n    !products.vocal.exists &&\r\n    !products.lead.exists\r\n  );\r\n});\r\n</script>\r\n\r\n<template>\r\n  <section v-if=\"shown\">\r\n    <SectionTitle>{{ $t(\"SV.LIT_NoAvailableContent\") }}</SectionTitle>\r\n    <div>\r\n      <p>\r\n        <i18n-t\r\n          keypath=\"SV.MES_NoLyrics\"\r\n          tag=\"span\"\r\n          scope=\"global\"\r\n        >\r\n          <template v-slot:license>\r\n            <a\r\n              href=\"https://ccli.com/copyright-license\"\r\n              target=\"_blank\"\r\n              >{{ $t(\"SV.LIT_CCLIChurchCopyrightLicense\")\r\n              }}<sup class=\"trademark\">&reg;</sup>\r\n              <FAIcon class=\"fa-light fa-external-link\" />\r\n            </a>\r\n          </template>\r\n        </i18n-t>\r\n      </p>\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nconst store = useSongStore();\r\n\r\nonMounted(() => {\r\n  store.updateSongdetailsMeta();\r\n});\r\n\r\nconst beta = useBetaStore();\r\nconst enableRecordingFocus = computed(\r\n  () => beta.features.recordingFocusLayout && store.song?.enableSongVersion,\r\n);\r\n\r\nconst lyricVideoMVPStore = useLyricVideoMVPStore();\r\nconst enableLyricVideoMVP = computed(() => lyricVideoMVPStore.enable);\r\n\r\nconst lvStore = useLyricVideoMVPStore();\r\nonMounted(async () => {\r\n  await lvStore.getAllVideos();\r\n});\r\nconst lvVideo = computed(\r\n  () =>\r\n    lvStore.allVideos.find(\r\n      (v) => v.ccliSongNumber === store.data?.ccliSongNumber,\r\n    ) || null,\r\n);\r\n\r\nconst lyricVideoTwoColumns = computed(\r\n  () =>\r\n    lvVideo.value ||\r\n    store.data?.translations?.length ||\r\n    store.placeholderNotLoaded ||\r\n    false,\r\n);\r\n</script>\r\n\r\n<template>\r\n  <PageWrapper v-if=\"!enableLyricVideoMVP\">\r\n    <div>\r\n      <div\r\n        v-if=\"\r\n          store.status === LoadStatus.Ready &&\r\n          (store.data?.products.general.noAuthReason ===\r\n            NoAuthReason.NotAuthenticated ||\r\n            store.data?.products.general.noAuthReason ===\r\n              NoAuthReason.RequiresSubscriptionUpgrade)\r\n        \"\r\n        class=\"mb-2\"\r\n      >\r\n        <SongDetailsAlertNotAuthenticated\r\n          v-if=\"\r\n            store.data?.products.general.noAuthReason ===\r\n            NoAuthReason.NotAuthenticated\r\n          \"\r\n        />\r\n        <SongDetailsAlertUpgradeSubscription\r\n          v-else-if=\"\r\n            store.data?.products.general.noAuthReason ===\r\n            NoAuthReason.RequiresSubscriptionUpgrade\r\n          \"\r\n        />\r\n      </div>\r\n      <div class=\"grid gap-5 lg:grid-cols-2\">\r\n        <div>\r\n          <SectionNoAvailableContent />\r\n          <SectionLyrics />\r\n        </div>\r\n        <div>\r\n          <!--<SectionMedia v-if=\"enableRecordingFocus\" />-->\r\n          <SectionAuthors v-if=\"enableRecordingFocus\" />\r\n          <SectionThemes />\r\n\r\n          <div class=\"grid gap-2 md:grid-cols-2\">\r\n            <SectionTranslations />\r\n            <SectionCatalogs />\r\n          </div>\r\n\r\n          <SectionCopyrights />\r\n          <SectionAdministrators />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </PageWrapper>\r\n\r\n  <Container v-else>\r\n    <div\r\n      class=\"grid gap-5\"\r\n      :class=\"{ 'xl:grid-cols-5': lyricVideoTwoColumns }\"\r\n    >\r\n      <div\r\n        :class=\"{\r\n          'xl:col-span-3': lyricVideoTwoColumns,\r\n        }\"\r\n      >\r\n        <Card>\r\n          <SectionNoAvailableContent />\r\n          <SectionLyrics force-preview />\r\n\r\n          <SectionAuthors v-if=\"enableRecordingFocus\" />\r\n          <SectionThemes />\r\n          <SectionCatalogs />\r\n          <SectionCopyrights />\r\n          <SectionAdministrators />\r\n          <SectionMedia />\r\n        </Card>\r\n      </div>\r\n      <div\r\n        v-if=\"lyricVideoTwoColumns\"\r\n        class=\"xl:col-span-2\"\r\n      >\r\n        <Card>\r\n          <SectionLyricVideo :data=\"lvVideo\" />\r\n          <SectionTranslations />\r\n        </Card>\r\n      </div>\r\n    </div>\r\n  </Container>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.song-content {\r\n}\r\n:deep() {\r\n  h2 {\r\n    @apply text-xl font-semibold;\r\n  }\r\n  section {\r\n    @apply mb-3;\r\n  }\r\n}\r\n</style>\r\n"],"names":["store","useSongStore","items","computed","_a","m","playingIndex","ref","onMounted","emitter","onYoutubeVideoEnd","onBeforeUnmount","onClick","ind","song","shown","LoadStatus","_c","_b","copyrights","catalogs","translations","status","showAllLyrics","t","useI18n","sectionTitle","onCopyLyrics","noLyrics","products","beta","useBetaStore","enableRecordingFocus","lyricVideoMVPStore","useLyricVideoMVPStore","enableLyricVideoMVP","lvStore","lvVideo","v","lyricVideoTwoColumns"],"mappings":"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"}