{"version":3,"file":"TrackBase-b5b9fc2b.js","sources":["../../src/components/library/TrackBase.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Track, Artist, Library } from '~/types'\n\nimport { momentFormat } from '~/utils/filters'\nimport { computed, ref, watch } from 'vue'\nimport { useI18n } from 'vue-i18n'\nimport { useRouter } from 'vue-router'\nimport { getDomain } from '~/utils'\nimport { useStore } from '~/store'\n\nimport axios from 'axios'\n\nimport TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'\nimport TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'\nimport EmbedWizard from '~/components/audio/EmbedWizard.vue'\nimport SemanticModal from '~/components/semantic/Modal.vue'\nimport PlayButton from '~/components/audio/PlayButton.vue'\n\nimport updateQueryString from '~/composables/updateQueryString'\nimport useErrorHandler from '~/composables/useErrorHandler'\nimport useReport from '~/composables/moderation/useReport'\nimport useLogger from '~/composables/useLogger'\n\ninterface Events {\n  (e: 'deleted'): void\n}\n\ninterface Props {\n  id: number\n}\n\nconst emit = defineEmits([\"deleted\"])\nconst props = defineProps({\n  id: null\n})\n\nconst { report, getReportableObjects } = useReport()\n\nconst track = ref<Track | null>(null)\nconst artist = ref<Artist | null>(null)\nconst showEmbedModal = ref(false)\nconst libraries = ref([] as Library[])\n\nconst logger = useLogger()\nconst router = useRouter()\nconst store = useStore()\n\nconst domain = computed(() => getDomain(track.value?.fid ?? ''))\nconst publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])\nconst isEmbedable = computed(() => artist.value?.channel?.actor || publicLibraries.value.length)\nconst upload = computed(() => track.value?.uploads?.[0] ?? null)\nconst wikipediaUrl = computed(() => `https://en.wikipedia.org/w/index.php?search=${encodeURI(`${track.value?.title ?? ''} ${track.value?.artist?.name ?? ''}`)}`)\nconst discogsUrl = computed(() => `https://discogs.com/search/?type=release&title=${encodeURI(track.value?.album?.title ?? '')}&artist=${encodeURI(track.value?.artist?.name ?? '')}&title=${encodeURI(track.value?.title ?? '')}`)\nconst downloadUrl = computed(() => {\n  const url = store.getters['instance/absoluteUrl'](upload.value?.listen_url ?? '')\n  return store.state.auth.authenticated\n    ? updateQueryString(url, 'token', encodeURI(store.state.auth.scopedTokens.listen ?? ''))\n    : url\n})\n\nconst attributedToUrl = computed(() => router.resolve({\n  name: 'profile.full.overview',\n  params: {\n    username: track.value?.attributed_to.preferred_username,\n    domain: track.value?.attributed_to.domain\n  }\n})?.href)\n\nconst { t } = useI18n()\nconst labels = computed(() => ({\n  title: t('components.library.TrackBase.title'),\n  download: t('components.library.TrackBase.button.download'),\n  more: t('components.library.TrackBase.button.more')\n}))\n\nconst isLoading = ref(false)\nconst fetchData = async () => {\n  isLoading.value = true\n  logger.debug(`Fetching track \"${props.id}\"`)\n  try {\n    const trackResponse = await axios.get(`tracks/${props.id}/`, { params: { refresh: 'true' } })\n    track.value = trackResponse.data\n    const artistResponse = await axios.get(`artists/${trackResponse.data.artist.id}/`)\n    artist.value = artistResponse.data\n  } catch (error) {\n    useErrorHandler(error as Error)\n  }\n  isLoading.value = false\n}\n\nwatch(() => props.id, fetchData, { immediate: true })\n\nconst remove = async () => {\n  isLoading.value = true\n  try {\n    await axios.delete(`tracks/${track.value?.id}`)\n    emit('deleted')\n    router.push({ name: 'library.artists.detail', params: { id: artist.value?.id } })\n  } catch (error) {\n    useErrorHandler(error as Error)\n  }\n\n  isLoading.value = false\n}\n</script>\n\n<template>\n  <main>\n    <div\n      v-if=\"isLoading\"\n      v-title=\"labels.title\"\n      class=\"ui vertical segment\"\n    >\n      <div :class=\"['ui', 'centered', 'active', 'inline', 'loader']\" />\n    </div>\n    <template v-if=\"track\">\n      <section\n        v-title=\"track.title\"\n        :class=\"['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']\"\n      >\n        <div class=\"ui basic padded segment\">\n          <div class=\"ui stackable grid row container\">\n            <div class=\"eight wide left aligned column\">\n              <h1 class=\"ui header\">\n                {{ track.title }}\n              </h1>\n              <span class=\"ui header\">\n                <i18n-t\n                  v-if=\"track.attributed_to\"\n                  keypath=\"components.library.TrackBase.subtitle.with-uploader\"\n                >\n                  <a\n                    class=\"internal\"\n                    :href=\"attributedToUrl\"\n                  >\n                    <span class=\"symbol at\" />{{ track.attributed_to.full_username }}\n                  </a>\n                  <time\n                    :title=\"track.creation_date\"\n                    :datetime=\"track.creation_date\"\n                  >\n                    {{ momentFormat(new Date(track.creation_date), 'LL') }}\n                  </time>\n                </i18n-t>\n                <i18n-t\n                  v-else\n                  keypath=\"components.library.TrackBase.subtitle.without-uploader\"\n                >\n                  <time\n                    :title=\"track.creation_date\"\n                    :datetime=\"track.creation_date\"\n                  >\n                    {{ momentFormat(new Date(track.creation_date), 'LL') }}\n                  </time>\n                </i18n-t>\n              </span>\n            </div>\n            <div class=\"eight wide right aligned column button-group\">\n              <play-button\n                class=\"vibrant\"\n                :track=\"track\"\n              >\n                {{ $t('components.library.TrackBase.button.play') }}\n              </play-button>\n              &nbsp;\n              <track-favorite-icon\n                v-if=\"$store.state.auth.authenticated\"\n                :border=\"true\"\n                :track=\"track\"\n              />\n              <track-playlist-icon\n                v-if=\"$store.state.auth.authenticated\"\n                class=\"circular\"\n                :border=\"true\"\n                :track=\"track\"\n              />\n              <a\n                v-if=\"upload\"\n                role=\"button\"\n                :aria-label=\"labels.download\"\n                :href=\"downloadUrl\"\n                target=\"_blank\"\n                class=\"ui basic circular icon button\"\n                :title=\"labels.download\"\n              >\n                <i class=\"download icon\" />\n              </a>\n              <semantic-modal\n                v-if=\"isEmbedable\"\n                v-model:show=\"showEmbedModal\"\n              >\n                <h4 class=\"header\">\n                  {{ $t('components.library.TrackBase.modal.embed.header') }}\n                </h4>\n                <div class=\"scrolling content\">\n                  <div class=\"description\">\n                    <embed-wizard\n                      :id=\"track.id\"\n                      type=\"track\"\n                    />\n                  </div>\n                </div>\n                <div class=\"actions\">\n                  <button class=\"ui basic deny button\">\n                    {{ $t('components.library.TrackBase.button.cancel') }}\n                  </button>\n                </div>\n              </semantic-modal>\n              <button\n                v-dropdown=\"{direction: 'downward'}\"\n                class=\"ui floating dropdown circular icon basic button\"\n                :title=\"labels.more\"\n              >\n                <i class=\"ellipsis vertical icon\" />\n                <div\n                  class=\"menu\"\n                  style=\"right: 0; left: auto\"\n                >\n                  <a\n                    v-if=\"domain != $store.getters['instance/domain']\"\n                    :href=\"track.fid\"\n                    target=\"_blank\"\n                    class=\"basic item\"\n                  >\n                    <i class=\"external icon\" />\n                    {{ $t('components.library.TrackBase.link.domain', {domain: domain}) }}\n                  </a>\n                  <div\n                    v-if=\"isEmbedable\"\n                    role=\"button\"\n                    class=\"basic item\"\n                    @click=\"showEmbedModal = !showEmbedModal\"\n                  >\n                    <i class=\"code icon\" />\n                    {{ $t('components.library.TrackBase.button.embed') }}\n                  </div>\n                  <a\n                    :href=\"wikipediaUrl\"\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                    class=\"basic item\"\n                  >\n                    <i class=\"wikipedia w icon\" />\n                    {{ $t('components.library.TrackBase.link.wikipedia') }}\n                  </a>\n                  <a\n                    v-if=\"discogsUrl\"\n                    :href=\"discogsUrl\"\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                    class=\"basic item\"\n                  >\n                    <i class=\"external icon\" />\n                    {{ $t('components.library.TrackBase.link.discogs') }}\n                  </a>\n                  <router-link\n                    v-if=\"track.is_local\"\n                    :to=\"{name: 'library.tracks.edit', params: {id: track.id }}\"\n                    class=\"basic item\"\n                  >\n                    <i class=\"edit icon\" />\n                    {{ $t('components.library.TrackBase.button.edit') }}\n                  </router-link>\n                  <dangerous-button\n                    v-if=\"artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername\"\n                    :class=\"['ui', {loading: isLoading}, 'item']\"\n                    @confirm=\"remove()\"\n                  >\n                    <i class=\"ui trash icon\" />\n                    {{ $t('components.library.TrackBase.button.delete') }}\n                    <template #modal-header>\n                      <p>\n                        {{ $t('components.library.TrackBase.modal.delete.header') }}\n                      </p>\n                    </template>\n                    <template #modal-content>\n                      <div>\n                        <p>\n                          {{ $t('components.library.TrackBase.modal.delete.content.warning') }}\n                        </p>\n                      </div>\n                    </template>\n                    <template #modal-confirm>\n                      <p>\n                        {{ $t('components.library.TrackBase.button.delete') }}\n                      </p>\n                    </template>\n                  </dangerous-button>\n                  <div class=\"divider\" />\n                  <div\n                    v-for=\"obj in getReportableObjects({track})\"\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                  <div class=\"divider\" />\n                  <router-link\n                    v-if=\"$store.state.auth.availablePermissions['library']\"\n                    class=\"basic item\"\n                    :to=\"{name: 'manage.library.tracks.detail', params: {id: track.id}}\"\n                  >\n                    <i class=\"wrench icon\" />\n                    {{ $t('components.library.TrackBase.link.moderation') }}\n                  </router-link>\n                  <a\n                    v-if=\"$store.state.auth.profile && $store.state.auth.profile.is_superuser\"\n                    class=\"basic item\"\n                    :href=\"$store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <i class=\"wrench icon\" />\n                    {{ $t('components.library.TrackBase.link.django') }}\n                  </a>\n                </div>\n              </button>\n            </div>\n          </div>\n        </div>\n      </section>\n      <router-view\n        v-if=\"track\"\n        :key=\"$route.fullPath\"\n        :track=\"track\"\n        :object=\"track\"\n        object-type=\"track\"\n        @libraries-loaded=\"libraries = $event\"\n      />\n    </template>\n  </main>\n</template>\n"],"names":["emit","__emit","props","__props","report","getReportableObjects","useReport","track","ref","artist","showEmbedModal","libraries","logger","useLogger","router","useRouter","store","useStore","domain","computed","getDomain","_a","publicLibraries","library","isEmbedable","_b","upload","wikipediaUrl","_c","discogsUrl","_d","_e","downloadUrl","url","updateQueryString","attributedToUrl","t","useI18n","labels","isLoading","watch","trackResponse","axios","artistResponse","error","useErrorHandler","remove"],"mappings":"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"}