{"version":3,"mappings":";43CAGA,MAAMA,EAAQC,GAAqB,IAAMC,EAAA,WAAO,qBAAwB,+CAAC,EAEnEC,EAAeC,IACfC,EAAOC,EAA+B,EAAE,EACxCC,EAASD,EAAgBE,EAAW,OAAO,EAC3CC,EAAOC,IACDC,EAAY,EACxB,MAAMC,EAAWC,IACXC,EAAkBC,KAClBC,EAAUC,IACV,CAAE,EAAAC,GAAMC,aAENC,EAAA,GAAG,kBAAmBC,CAAI,EAClC,SAASC,GAAa,CACpBV,EAAS,0BAA0B,CACjC,MAAOM,EAAE,iCAAiC,EAC1C,YAAaA,EAAE,uCAAuC,EACvD,CACH,CAEAK,GAAUF,CAAI,EAEd,eAAeA,GAAO,CACTC,IACXb,EAAK,SAAS,EACV,IACGJ,EAAA,MAAQ,MAAMS,EAAgB,uBAAuB,EAC1DP,EAAO,MAAQC,EAAW,YACpBgB,EAAA,CACNjB,EAAO,MAAQC,EAAW,KAC5B,CACAC,EAAK,SAAS,CAChB,CAEM,MAAAgB,EAASnB,EAAI,EAAE,EACfoB,EAAaC,EAAS,IAC1BC,EAAOvB,EAAK,MAAQwB,GAASA,EAAK,MAAM,aAAa,GAGjDC,EAAeH,EAAS,IACxBF,EAAO,QAAU,GACZC,EAAW,MAEbA,EAAW,MAAM,OAAQG,GAC9BA,EAAK,MAAM,cAAc,SAASJ,EAAO,MAAM,aAAa,EAE/D","names":["Error","defineAsyncComponent","__vitePreload","translations","useTranslationStore","data","ref","status","LoadStatus","busy","useBusyStore","useApiStore","appStore","useAppStore","songSearchStore","useSongSearchStore","profile","useProfileStore","t","useI18n","emitter","init","updateHead","onMounted","e","search","sortedData","computed","sortBy","item","filteredData"],"ignoreList":[],"sources":["../../Vue/src/pages/SongsByLanguage.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { SongsByLanguageCategory } from \"@/models/SongsByLanguageCategory\";\r\nimport { LoadStatus } from \"@/models/frontend-only/LoadStatus\";\r\nconst Error = defineAsyncComponent(() => import(\"@/components/Error.vue\"));\r\n\r\nconst translations = useTranslationStore();\r\nconst data = ref<SongsByLanguageCategory[]>([]);\r\nconst status = ref<LoadStatus>(LoadStatus.Loading);\r\nconst busy = useBusyStore();\r\nconst api = useApiStore();\r\nconst appStore = useAppStore();\r\nconst songSearchStore = useSongSearchStore();\r\nconst profile = useProfileStore();\r\nconst { t } = useI18n();\r\n\r\nemitter.on(\"languageUpdated\", init);\r\nfunction updateHead() {\r\n  appStore.updateTitleAndDescription({\r\n    title: t(\"SV.MES_SongsByLanguageMetaTitle\"),\r\n    description: t(\"SV.MES_SongsByLanguageMetaDescription\"),\r\n  });\r\n}\r\n\r\nonMounted(init);\r\n\r\nasync function init() {\r\n  updateHead();\r\n  busy.showBusy();\r\n  try {\r\n    data.value = await songSearchStore.getSongsByLanguageData();\r\n    status.value = LoadStatus.Ready;\r\n  } catch {\r\n    status.value = LoadStatus.Error;\r\n  }\r\n  busy.hideBusy();\r\n}\r\n\r\nconst search = ref(\"\");\r\nconst sortedData = computed(() =>\r\n  sortBy(data.value, (item) => item.label.toLowerCase()),\r\n);\r\n\r\nconst filteredData = computed(() => {\r\n  if (search.value === \"\") {\r\n    return sortedData.value;\r\n  }\r\n  return sortedData.value.filter((item) =>\r\n    item.label.toLowerCase().includes(search.value.toLowerCase()),\r\n  );\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"\r\n      profile.features?.enableSongsByLanguage && status !== LoadStatus.Error\r\n    \"\r\n    :class=\"{ 'placeholder-glow': status === LoadStatus.Loading }\"\r\n  >\r\n    <PageHeader>\r\n      <template #h1>{{ $t(\"SV.LIT_SongsByLanguage\") }}</template>\r\n      <p>{{ $t(\"SV.MES_SongsByLanguage\") }}</p>\r\n    </PageHeader>\r\n    <div class=\"songs-by-language-page\">\r\n      <Container>\r\n        <div>\r\n          <div class=\"items-stretch gap-3 xl:grid xl:grid-cols-6 xl:gap-5\">\r\n            <div class=\"mb-5 xl:col-span-4 xl:mb-0\">\r\n              <section>\r\n                <h2>{{ $t(\"SV.LIT_FeaturedLanguages\") }}</h2>\r\n                <div class=\"block xl:hidden\">\r\n                  <MediaSlider v-if=\"status === LoadStatus.Ready\">\r\n                    <MediaSliderItem\r\n                      v-for=\"(l, li) of data\r\n                        .filter((d) => d.isPopularLanguage)\r\n                        .slice(0, 9)\"\r\n                      :key=\"li\"\r\n                    >\r\n                      <ArtButton\r\n                        class=\"songs-by-language-button songs-by-language-button-mobile\"\r\n                        :title=\"l.popularLanguageLabel || l.label\"\r\n                        :subtitle=\"`${translations.formatNumbers(\r\n                          l.numSongs,\r\n                        )} Songs`\"\r\n                        :img=\"l.img\"\r\n                        :img-alt=\"l.imgAlt\"\r\n                        :to=\"`/search/results?language=${l.language}`\"\r\n                        force-square\r\n                      >\r\n                        <template #image>\r\n                          <div class=\"songs-by-language-art\">\r\n                            <SongsByLanguageArtCover\r\n                              class=\"songs-by-language-art\"\r\n                              :title=\"l.label\"\r\n                            />\r\n                          </div>\r\n                        </template>\r\n                      </ArtButton>\r\n                    </MediaSliderItem>\r\n                  </MediaSlider>\r\n                  <MediaSlider v-else>\r\n                    <MediaSliderItem\r\n                      v-for=\"l of 9\"\r\n                      :key=\"l\"\r\n                    >\r\n                      <ArtButton\r\n                        class=\"songs-by-language-button songs-by-language-button-mobile\"\r\n                        force-square\r\n                        placeholder\r\n                        placeholder-text\r\n                      />\r\n                    </MediaSliderItem>\r\n                  </MediaSlider>\r\n                </div>\r\n                <div\r\n                  v-if=\"status !== LoadStatus.Ready\"\r\n                  class=\"hidden grid-cols-3 gap-5 xl:grid\"\r\n                >\r\n                  <ArtButton\r\n                    v-for=\"l of 9\"\r\n                    :key=\"l\"\r\n                    class=\"songs-by-language-button\"\r\n                    force-square\r\n                    placeholder\r\n                    placeholder-text\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  v-else\r\n                  class=\"hidden grid-cols-3 gap-5 xl:grid\"\r\n                >\r\n                  <ArtButton\r\n                    v-for=\"(l, li) of data\r\n                      .filter((d) => d.isPopularLanguage)\r\n                      .slice(0, 9)\"\r\n                    :key=\"li\"\r\n                    class=\"songs-by-language-button\"\r\n                    :title=\"l.popularLanguageLabel || l.label\"\r\n                    :subtitle=\"`${translations.formatNumbers(\r\n                      l.numSongs,\r\n                    )} Songs`\"\r\n                    :img=\"l.img\"\r\n                    :img-alt=\"l.imgAlt\"\r\n                    :to=\"`/search/results?language=${l.language}`\"\r\n                    force-square\r\n                  >\r\n                    <template #image>\r\n                      <div class=\"songs-by-language-art\">\r\n                        <SongsByLanguageArtCover :title=\"l.label\" />\r\n                      </div>\r\n                    </template>\r\n                  </ArtButton>\r\n                </div>\r\n              </section>\r\n            </div>\r\n            <div class=\"flex flex-col xl:col-span-2\">\r\n              <h2>{{ $t(\"SV.LIT_AllLanguages\") }}</h2>\r\n              <div class=\"mb-2\">\r\n                <label\r\n                  for=\"language-search\"\r\n                  class=\"sr-only\"\r\n                  >{{ $t(\"G.LIT_Search\") }}</label\r\n                >\r\n                <input\r\n                  id=\"language-search\"\r\n                  v-model=\"search\"\r\n                  type=\"text\"\r\n                  class=\"search-input input\"\r\n                  :placeholder=\"$t('SV.LIT_StartTypingToFilterList')\"\r\n                />\r\n              </div>\r\n              <Card\r\n                class=\"browse-all-card\"\r\n                no-body\r\n              >\r\n                <table\r\n                  v-if=\"filteredData.length\"\r\n                  class=\"table\"\r\n                >\r\n                  <tbody>\r\n                    <router-link\r\n                      v-for=\"(th, ti) of filteredData\"\r\n                      :key=\"'th' + ti\"\r\n                      class=\"language-link table-row\"\r\n                      :to=\"`/search/results?language=${th.language}`\"\r\n                      :data-title=\"th.language\"\r\n                    >\r\n                      <td>{{ th.label }}</td>\r\n                      <td style=\"width: 100px\">\r\n                        {{ translations.formatNumbers(th.numSongs) }}\r\n                      </td>\r\n                    </router-link>\r\n                  </tbody>\r\n                </table>\r\n\r\n                <div\r\n                  v-if=\"!filteredData.length && data.length\"\r\n                  class=\"search-empty-msg\"\r\n                >\r\n                  <div class=\"text-center\">\r\n                    <div>\r\n                      <i18n-t\r\n                        keypath=\"SV.LIT_NoLanguagesFoundUnder\"\r\n                        tag=\"div\"\r\n                        scope=\"global\"\r\n                      >\r\n                        <template #search>\r\n                          <strong>\r\n                            {{ search }}\r\n                          </strong>\r\n                        </template>\r\n                      </i18n-t>\r\n                    </div>\r\n                    <div>\r\n                      <button\r\n                        class=\"btn-utility btn mt-2\"\r\n                        @click=\"search = ''\"\r\n                      >\r\n                        {{ $t(\"SV.LIT_ResetSearch\") }}\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </Card>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Container>\r\n    </div>\r\n  </div>\r\n  <Error v-if=\"status === LoadStatus.Error\" />\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.songs-by-language-page {\r\n  @apply bg-light-100;\r\n}\r\n.browse-all-card {\r\n  @apply relative overflow-y-auto p-8;\r\n  height: 300px;\r\n  @media screen(xl) {\r\n    height: 735px;\r\n  }\r\n  @media screen(2xl) {\r\n    height: 850px;\r\n  }\r\n}\r\n.songs-by-language-button-mobile {\r\n  width: 10em;\r\n  @apply mb-2;\r\n}\r\n.songs-by-language-art {\r\n  @apply relative;\r\n}\r\n</style>\r\n"],"file":"assets/SongsByLanguage-XGsM8fWg.js"}