{"version":3,"file":"LibraryBase-50929afc.js","sources":["../../src/components/audio/LibraryFollowButton.vue","../../src/views/library/LibraryBase.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Library } from '~/types'\n\nimport { computed } from 'vue'\nimport { useStore } from '~/store'\n\ninterface Events {\n  (e: 'unfollowed'): void\n  (e: 'followed'): void\n}\n\ninterface Props {\n  library: Library\n}\n\nconst emit = defineEmits([\"unfollowed\", \"followed\"])\nconst props = defineProps({\n  library: null\n})\n\nconst store = useStore()\nconst follow = computed(() => store.getters['libraries/follow'](props.library.uuid))\nconst isPending = computed(() => follow.value && follow.value.approved === null)\nconst isApproved = computed(() => follow.value && (follow.value?.approved === true || (isPending.value && props.library.privacy_level === 'everyone')))\n\nconst toggle = () => {\n  if (isPending.value || isApproved.value) {\n    emit('unfollowed')\n  } else {\n    emit('followed')\n  }\n\n  return store.dispatch('libraries/toggle', props.library.uuid)\n}\n</script>\n\n<template>\n  <button\n    :class=\"['ui', 'pink', {'inverted': isApproved || isPending}, {'favorited': isApproved}, 'icon', 'labeled', 'button']\"\n    @click.stop=\"toggle\"\n  >\n    <i class=\"heart icon\" />\n    <span v-if=\"isApproved\">\n      {{ $t('components.audio.LibraryFollowButton.button.unfollow') }}\n    </span>\n    <span v-else-if=\"isPending\">\n      {{ $t('components.audio.LibraryFollowButton.button.cancel') }}\n    </span>\n    <span v-else>\n      {{ $t('components.audio.LibraryFollowButton.button.follow') }}\n    </span>\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport type { Library } from '~/types'\n\nimport { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'\nimport { computed, ref, watch, watchEffect } from 'vue'\nimport { humanSize } from '~/utils/filters'\nimport { useI18n } from 'vue-i18n'\nimport { useStore } from '~/store'\n\nimport axios from 'axios'\n\nimport LibraryFollowButton from '~/components/audio/LibraryFollowButton.vue'\nimport RadioButton from '~/components/radios/Button.vue'\n\nimport useErrorHandler from '~/composables/useErrorHandler'\nimport useReport from '~/composables/moderation/useReport'\n\ninterface Props {\n  id: number\n}\n\nconst props = defineProps({\n  id: null\n})\n\nconst { report, getReportableObjects } = useReport()\nconst store = useStore()\n\nconst object = ref<Library | null>(null)\n\nconst isOwner = computed(() => store.state.auth.authenticated && object.value?.actor.full_username === store.state.auth.fullUsername)\nconst isPlayable = computed(() => (object.value?.uploads_count ?? 0) > 0 && (\n  isOwner.value\n    || object.value?.privacy_level === 'everyone'\n    || (object.value?.privacy_level === 'instance' && store.state.auth.authenticated && object.value.actor.domain === store.getters['instance/domain'])\n    || (store.getters['libraries/follow'](object.value?.uuid) || {}).approved === true\n))\n\nconst { t } = useI18n()\nconst labels = computed(() => ({\n  title: t('views.library.LibraryBase.title'),\n  visibility: {\n    me: t('views.library.LibraryBase.label.private'),\n    instance: t('views.library.LibraryBase.label.instance'),\n    everyone: t('views.library.LibraryBase.label.public')\n  },\n  tooltips: {\n    me: t('views.library.LibraryBase.tooltip.private'),\n    instance: t('views.library.LibraryBase.tooltip.instance'),\n    everyone: t('views.library.LibraryBase.tooltip.public')\n  }\n}))\n\nonBeforeRouteUpdate((to) => {\n  to.meta.preserveScrollPosition = true\n})\n\nconst isLoading = ref(false)\nconst fetchData = async () => {\n  isLoading.value = true\n  try {\n    const response = await axios.get(`libraries/${props.id}`)\n    object.value = response.data\n  } catch (error) {\n    useErrorHandler(error as Error)\n  }\n\n  isLoading.value = false\n}\n\nwatch(() => props.id, fetchData, { immediate: true })\n\nconst route = useRoute()\nconst router = useRouter()\nwatchEffect(() => {\n  if (!store.state.auth.authenticated && object.value && store.getters['instance/domain'] !== object.value.actor.domain) {\n    router.push({ name: 'login', query: { next: route.fullPath } })\n  }\n})\n\nconst updateUploads = (count: number) => {\n  if (object.value) {\n    object.value.uploads_count += count\n  }\n}\n</script>\n\n<template>\n  <main v-title=\"labels.title\">\n    <div class=\"ui vertical stripe segment container\">\n      <div\n        v-if=\"isLoading\"\n        class=\"ui centered active inline loader\"\n      />\n      <div\n        v-else-if=\"object\"\n        class=\"ui stackable grid\"\n      >\n        <div class=\"ui five wide column\">\n          <button\n            ref=\"dropdown\"\n            v-dropdown=\"{direction: 'downward'}\"\n            class=\"ui pointing dropdown icon small basic right floated button\"\n            style=\"position: absolute; right: 1em; top: 1em;\"\n          >\n            <i class=\"ellipsis vertical icon\" />\n            <div class=\"menu\">\n              <a\n                v-if=\"object.actor.domain != $store.getters['instance/domain']\"\n                :href=\"object.fid\"\n                target=\"_blank\"\n                class=\"basic item\"\n              >\n                <i class=\"external icon\" />\n                {{ $t('views.library.LibraryBase.link.domain', {domain: object.actor.domain}) }}\n              </a>\n              <div\n                v-for=\"obj in getReportableObjects({library: object})\"\n                :key=\"obj.target.type + obj.target.id\"\n                role=\"button\"\n                class=\"basic item\"\n                @click.stop.prevent=\"report(obj)\"\n              >\n                <i class=\"share icon\" /> {{ obj.label }}\n              </div>\n\n              <div class=\"divider\" />\n              <router-link\n                v-if=\"$store.state.auth.availablePermissions['moderation']\"\n                class=\"basic item\"\n                :to=\"{name: 'manage.library.libraries.detail', params: {id: object.uuid}}\"\n              >\n                <i class=\"wrench icon\" />\n                {{ $t('views.library.LibraryBase.link.moderation') }}\n              </router-link>\n            </div>\n          </button>\n          <h1 class=\"ui header\">\n            <div class=\"ui hidden divider\" />\n            <div class=\"ellipsis content\">\n              <i class=\"layer group small icon\" />\n              <span>{{ object.name }}</span>\n              <div class=\"ui very small hidden divider\" />\n              <div\n                class=\"sub header ellipsis\"\n                :title=\"object.actor.full_username\"\n              >\n                <actor-link\n                  :avatar=\"false\"\n                  :actor=\"object.actor\"\n                  :truncate-length=\"0\"\n                >\n                  {{ $t('views.library.LibraryBase.link.owner', {username: object.actor.full_username}) }}\n                </actor-link>\n              </div>\n            </div>\n          </h1>\n          <p>\n            <span\n              v-if=\"object.privacy_level === 'me'\"\n              :title=\"labels.tooltips.me\"\n            >\n              <i class=\"lock icon\" />\n              {{ labels.visibility.me }}\n            </span>\n            <span\n              v-else-if=\"object.privacy_level === 'instance'\"\n              :title=\"labels.tooltips.instance\"\n            >\n              <i class=\"lock open icon\" />\n              {{ labels.visibility.instance }}\n            </span>\n            <span\n              v-else-if=\"object.privacy_level === 'everyone'\"\n              :title=\"labels.tooltips.everyone\"\n              class=\"middledot icon\"\n            >\n              <i class=\"globe icon\" />\n              {{ labels.visibility.everyone }}\n            </span>\n            <span class=\"middledot icon\">\n              <i class=\"music icon\" />\n              {{ $t('views.library.LibraryBase.meta.tracks', object.uploads_count) }}\n            </span>\n            <span v-if=\"object.size\">\n              <i class=\"database icon\" />\n              {{ humanSize(object.size) }}\n            </span>\n          </p>\n\n          <div class=\"header-buttons\">\n            <div class=\"ui small buttons\">\n              <radio-button\n                :disabled=\"!isPlayable || null\"\n                type=\"library\"\n                :object-id=\"object.uuid\"\n              />\n            </div>\n            <div\n              v-if=\"!isOwner\"\n              class=\"ui small buttons\"\n            >\n              <library-follow-button\n                v-if=\"$store.state.auth.authenticated\"\n                :library=\"object\"\n              />\n            </div>\n          </div>\n\n          <template v-if=\"$store.getters['ui/layoutVersion'] === 'large'\">\n            <rendered-description\n              :content=\"object.description ? {html: object.description} : null\"\n              :update-url=\"`channels/${object.uuid}/`\"\n              :can-update=\"false\"\n            />\n            <div class=\"ui hidden divider\" />\n          </template>\n          <div class=\"ui form\">\n            <div class=\"field\">\n              <label for=\"copy-input\">\n                {{ $t('views.library.LibraryBase.label.sharingLink') }}\n              </label>\n              <p>\n                {{ $t('views.library.LibraryBase.description.sharingLink') }}\n              </p>\n              <copy-input :value=\"object.fid\" />\n            </div>\n          </div>\n        </div>\n        <div class=\"ui eleven wide column\">\n          <div class=\"ui head vertical stripe segment\">\n            <div class=\"ui container\">\n              <div class=\"ui secondary pointing center aligned menu\">\n                <router-link\n                  class=\"item\"\n                  exact-active-class=\"active\"\n                  active-class=\"\"\n                  :to=\"{name: 'library.detail'}\"\n                >\n                  {{ $t('views.library.LibraryBase.link.artists') }}\n                </router-link>\n                <router-link\n                  class=\"item\"\n                  exact-active-class=\"active\"\n                  active-class=\"\"\n                  :to=\"{name: 'library.detail.albums'}\"\n                >\n                  {{ $t('views.library.LibraryBase.link.albums') }}\n                </router-link>\n                <router-link\n                  class=\"item\"\n                  exact-active-class=\"active\"\n                  active-class=\"\"\n                  :to=\"{name: 'library.detail.tracks'}\"\n                >\n                  {{ $t('views.library.LibraryBase.link.tracks') }}\n                </router-link>\n                <router-link\n                  v-if=\"isOwner\"\n                  class=\"item\"\n                  exact-active-class=\"active\"\n                  active-class=\"\"\n                  :to=\"{name: 'library.detail.upload'}\"\n                >\n                  <i class=\"upload icon\" />\n                  {{ $t('views.library.LibraryBase.button.upload') }}\n                </router-link>\n                <router-link\n                  v-if=\"isOwner\"\n                  class=\"item\"\n                  exact-active-class=\"active\"\n                  active-class=\"\"\n                  :to=\"{name: 'library.detail.edit'}\"\n                >\n                  <i class=\"pencil icon\" />\n                  {{ $t('views.library.LibraryBase.button.edit') }}\n                </router-link>\n              </div>\n              <div class=\"ui hidden divider\" />\n              <router-view\n                :is-owner=\"isOwner\"\n                :object=\"object\"\n                @updated=\"fetchData\"\n                @uploads-finished=\"updateUploads\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </main>\n</template>\n"],"names":["emit","__emit","props","__props","store","useStore","follow","computed","isPending","isApproved","_a","toggle","report","getReportableObjects","useReport","object","ref","isOwner","isPlayable","_b","_c","_d","t","useI18n","labels","onBeforeRouteUpdate","to","isLoading","fetchData","response","axios","error","useErrorHandler","watch","route","useRoute","router","useRouter","watchEffect","updateUploads","count"],"mappings":"oxBAeA,MAAMA,EAAOC,EACPC,EAAQC,EAIRC,EAAQC,IACRC,EAASC,EAAS,IAAMH,EAAM,QAAQ,kBAAkB,EAAEF,EAAM,QAAQ,IAAI,CAAC,EAC7EM,EAAYD,EAAS,IAAMD,EAAO,OAASA,EAAO,MAAM,WAAa,IAAI,EACzEG,EAAaF,EAAS,IAAA,OAAM,OAAAD,EAAO,UAAUI,EAAAJ,EAAO,QAAP,YAAAI,EAAc,YAAa,IAASF,EAAU,OAASN,EAAM,QAAQ,gBAAkB,YAAY,EAEhJS,EAAS,KACTH,EAAU,OAASC,EAAW,MAChCT,EAAK,YAAY,EAEjBA,EAAK,UAAU,EAGVI,EAAM,SAAS,mBAAoBF,EAAM,QAAQ,IAAI,4/DCX9D,MAAMA,EAAQC,EAIR,CAAE,OAAAS,EAAQ,qBAAAC,CAAqB,EAAIC,GAAU,EAC7CV,EAAQC,IAERU,EAASC,EAAoB,IAAI,EAEjCC,EAAUV,EAAS,IAAA,OAAM,OAAAH,EAAM,MAAM,KAAK,iBAAiBM,EAAAK,EAAO,QAAP,YAAAL,EAAc,MAAM,iBAAkBN,EAAM,MAAM,KAAK,aAAY,EAC9Hc,EAAaX,EAAS,iBAAO,SAAAG,EAAAK,EAAO,QAAP,YAAAL,EAAc,gBAAiB,GAAK,IACrEO,EAAQ,SACHE,EAAAJ,EAAO,QAAP,YAAAI,EAAc,iBAAkB,cAC/BC,EAAAL,EAAO,QAAP,YAAAK,EAAc,iBAAkB,YAAchB,EAAM,MAAM,KAAK,eAAiBW,EAAO,MAAM,MAAM,SAAWX,EAAM,QAAQ,iBAAiB,IAC7IA,EAAM,QAAQ,kBAAkB,GAAEiB,EAAAN,EAAO,QAAP,YAAAM,EAAc,IAAI,GAAK,IAAI,WAAa,IACjF,EAEK,CAAE,EAAAC,GAAMC,IACRC,EAASjB,EAAS,KAAO,CAC7B,MAAOe,EAAE,iCAAiC,EAC1C,WAAY,CACV,GAAIA,EAAE,yCAAyC,EAC/C,SAAUA,EAAE,0CAA0C,EACtD,SAAUA,EAAE,wCAAwC,CACtD,EACA,SAAU,CACR,GAAIA,EAAE,2CAA2C,EACjD,SAAUA,EAAE,4CAA4C,EACxD,SAAUA,EAAE,0CAA0C,CACxD,CACA,EAAA,EAEFG,EAAqBC,GAAO,CAC1BA,EAAG,KAAK,uBAAyB,EAAA,CAClC,EAEK,MAAAC,EAAYX,EAAI,EAAK,EACrBY,EAAY,SAAY,CAC5BD,EAAU,MAAQ,GACd,GAAA,CACF,MAAME,EAAW,MAAMC,GAAM,IAAI,aAAa5B,EAAM,IAAI,EACxDa,EAAO,MAAQc,EAAS,WACjBE,GACPC,EAAgBD,CAAc,CAChC,CAEAJ,EAAU,MAAQ,EAAA,EAGpBM,EAAM,IAAM/B,EAAM,GAAI0B,EAAW,CAAE,UAAW,GAAM,EAEpD,MAAMM,EAAQC,IACRC,EAASC,IACfC,EAAY,IAAM,CACZ,CAAClC,EAAM,MAAM,KAAK,eAAiBW,EAAO,OAASX,EAAM,QAAQ,iBAAiB,IAAMW,EAAO,MAAM,MAAM,QACtGqB,EAAA,KAAK,CAAE,KAAM,QAAS,MAAO,CAAE,KAAMF,EAAM,QAAS,CAAA,CAAG,CAChE,CACD,EAEK,MAAAK,EAAiBC,GAAkB,CACnCzB,EAAO,QACTA,EAAO,MAAM,eAAiByB,EAChC"}