{"version":3,"file":"TrackDetail-e380549f.js","sources":["../../src/components/library/TrackDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Track, Library } from '~/types'\n\nimport { humanSize, momentFormat, truncate } from '~/utils/filters'\nimport { computed, ref, watchEffect } from 'vue'\n\nimport time from '~/utils/time'\nimport axios from 'axios'\n\nimport LibraryWidget from '~/components/federation/LibraryWidget.vue'\nimport PlaylistWidget from '~/components/playlists/Widget.vue'\nimport TagsList from '~/components/tags/List.vue'\n\nimport useErrorHandler from '~/composables/useErrorHandler'\n\ninterface Events {\n  (e: 'libraries-loaded', libraries: Library[]): void\n}\n\ninterface Props {\n  track: Track\n}\n\nconst emit = defineEmits([\"libraries-loaded\"])\nconst props = defineProps({\n  track: null\n})\n\nconst musicbrainzUrl = computed(() => props.track.mbid\n  ? `https://musicbrainz.org/recording/${props.track.mbid}`\n  : null\n)\n\nconst upload = computed(() => props.track.uploads?.[0] ?? null)\n\nconst license = ref()\nconst fetchLicense = async (licenseId: string) => {\n  license.value = undefined\n\n  try {\n    const response = await axios.get(`licenses/${licenseId}`)\n    license.value = response.data\n  } catch (error) {\n    useErrorHandler(error as Error)\n  }\n}\n\nwatchEffect(() => {\n  if (props.track.license) {\n    // @ts-expect-error For some reason, track.license is id instead of License here\n    fetchLicense(props.track.license)\n  }\n})\n</script>\n\n<template>\n  <div v-if=\"track\">\n    <section class=\"ui vertical stripe segment\">\n      <div class=\"ui stackable grid row container\">\n        <div class=\"six wide column\">\n          <template v-if=\"upload\">\n            <img\n              v-if=\"track.cover && track.cover.urls.large_square_crop\"\n              v-lazy=\"$store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)\"\n              alt=\"Cover Image\"\n              class=\"ui fluid image track-cover-image\"\n            >\n            <img\n              v-else-if=\"track.album && track.album.cover && track.album.cover.urls.large_square_crop\"\n              v-lazy=\"$store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)\"\n              alt=\"Cover Image\"\n              class=\"ui fluid image track-cover-image\"\n            >\n            <img\n              v-else\n              src=\"../../assets/audio/default-cover.png\"\n              alt=\"Cover Image\"\n              class=\"ui fluid image track-cover-image\"\n            >\n            <h3 class=\"ui header\">\n              <span v-if=\"track.artist?.content_category === 'music'\">\n                {{ $t('components.library.TrackDetail.header.track') }}\n              </span>\n              <span v-else>\n                {{ $t('components.library.TrackDetail.header.episode') }}\n              </span>\n            </h3>\n            <table class=\"ui basic table\">\n              <tbody>\n                <tr>\n                  <td>\n                    {{ $t('components.library.TrackDetail.table.track.duration') }}\n                  </td>\n                  <td class=\"right aligned\">\n                    <template v-if=\"upload.duration\">\n                      {{ time.parse(upload.duration) }}\n                    </template>\n                    <span v-else>\n                      {{ $t('components.library.TrackDetail.notApplicable') }}\n                    </span>\n                  </td>\n                </tr>\n                <tr>\n                  <td>\n                    {{ $t('components.library.TrackDetail.table.track.size') }}\n                  </td>\n                  <td class=\"right aligned\">\n                    <template v-if=\"upload.size\">\n                      {{ humanSize(upload.size) }}\n                    </template>\n                    <span v-else>\n                      {{ $t('components.library.TrackDetail.notApplicable') }}\n                    </span>\n                  </td>\n                </tr>\n                <tr>\n                  <td>\n                    {{ $t('components.library.TrackDetail.table.track.codec') }}\n                  </td>\n                  <td class=\"right aligned\">\n                    <template v-if=\"upload.extension\">\n                      {{ upload.extension }}\n                    </template>\n                    <span v-else>\n                      {{ $t('components.library.TrackDetail.notApplicable') }}\n                    </span>\n                  </td>\n                </tr>\n                <tr>\n                  <td>\n                    {{ $t('components.library.TrackDetail.table.track.bitrate.label') }}\n                  </td>\n                  <td class=\"right aligned\">\n                    <template v-if=\"upload.bitrate\">\n                      {{ $t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)}) }}\n                    </template>\n                    <span v-else>\n                      {{ $t('components.library.TrackDetail.notApplicable') }}\n                    </span>\n                  </td>\n                </tr>\n                <tr>\n                  <td>\n                    {{ $t('components.library.TrackDetail.table.track.downloads') }}\n                  </td>\n                  <td class=\"right aligned\">\n                    {{ track.downloads_count }}\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </template>\n        </div>\n        <div class=\"ten wide column\">\n          <template v-if=\"track.tags && track.tags.length > 0\">\n            <tags-list :tags=\"track.tags\" />\n            <div class=\"ui hidden divider\" />\n          </template>\n\n          <rendered-description\n            :content=\"track.description\"\n            :can-update=\"false\"\n          />\n          <h2 class=\"ui header\">\n            {{ $t('components.library.TrackDetail.header.release') }}\n          </h2>\n          <table class=\"ui basic table ellipsis-rows\">\n            <tbody>\n              <tr>\n                <td>\n                  {{ $t('components.library.TrackDetail.table.release.artist') }}\n                </td>\n                <td class=\"right aligned\">\n                  <router-link :to=\"{name: 'library.artists.detail', params: {id: track.artist?.id}}\">\n                    {{ track.artist?.name }}\n                  </router-link>\n                </td>\n              </tr>\n              <tr v-if=\"track.album\">\n                <td>\n                  <span v-if=\"track.album.artist.content_category === 'music'\">\n                    {{ $t('components.library.TrackDetail.table.release.album') }}\n                  </span>\n                  <span v-else>\n                    {{ $t('components.library.TrackDetail.table.release.series') }}\n                  </span>\n                </td>\n                <td class=\"right aligned\">\n                  <router-link :to=\"{name: 'library.albums.detail', params: {id: track.album.id}}\">\n                    {{ track.album.title }}\n                  </router-link>\n                </td>\n              </tr>\n              <tr>\n                <td>\n                  {{ $t('components.library.TrackDetail.table.release.year') }}\n                </td>\n                <td class=\"right aligned\">\n                  <template v-if=\"track.album && track.album.release_date\">\n                    {{ momentFormat(new Date(track.album.release_date), 'Y') }}\n                  </template>\n                  <template v-else>\n                    {{ $t('components.library.TrackDetail.notApplicable') }}\n                  </template>\n                </td>\n              </tr>\n              <tr>\n                <td>\n                  {{ $t('components.library.TrackDetail.table.release.copyright') }}\n                </td>\n                <td class=\"right aligned\">\n                  <span\n                    v-if=\"track.copyright\"\n                    :title=\"track.copyright\"\n                  >{{ truncate(track.copyright, 50) }}</span>\n                  <template v-else>\n                    {{ $t('components.library.TrackDetail.notApplicable') }}\n                  </template>\n                </td>\n              </tr>\n              <tr>\n                <td>\n                  {{ $t('components.library.TrackDetail.table.release.license') }}\n                </td>\n                <td class=\"right aligned\">\n                  <a\n                    v-if=\"license\"\n                    :href=\"license.url\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >{{ license.name }}</a>\n                  <span v-else>\n                    {{ $t('components.library.TrackDetail.notApplicable') }}\n                  </span>\n                </td>\n              </tr>\n              <tr v-if=\"!track.is_local\">\n                <td>\n                  {{ $t('components.library.TrackDetail.table.release.url') }}\n                </td>\n                <td :title=\"track.fid\">\n                  <a\n                    :href=\"track.fid\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    {{ truncate(track.fid, 65) }}\n                  </a>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n          <a\n            v-if=\"musicbrainzUrl\"\n            :href=\"musicbrainzUrl\"\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n          >\n            <i class=\"external icon\" />\n            {{ $t('components.library.TrackDetail.link.musicbrainz') }}\n          </a>\n          <h2 class=\"ui header\">\n            {{ $t('components.library.TrackDetail.header.playlists') }}\n          </h2>\n          <playlist-widget\n            :url=\"'playlists/'\"\n            :filters=\"{track: track.id, playable: true, ordering: '-modification_date'}\"\n          />\n\n          <h2 class=\"ui header\">\n            {{ $t('components.library.TrackDetail.header.library') }}\n          </h2>\n          <library-widget\n            :url=\"`tracks/${track.id}/libraries/`\"\n            @loaded=\"emit('libraries-loaded', $event)\"\n          >\n            {{ $t('components.library.TrackDetail.description.library') }}\n          </library-widget>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n"],"names":["emit","__emit","props","__props","musicbrainzUrl","computed","upload","_a","license","ref","fetchLicense","licenseId","response","axios","error","useErrorHandler","watchEffect"],"mappings":"0nEAuBA,MAAMA,EAAOC,EACPC,EAAQC,EAIRC,EAAiBC,EAAS,IAAMH,EAAM,MAAM,KAC9C,qCAAqCA,EAAM,MAAM,OACjD,IAAA,EAGEI,EAASD,EAAS,WAAM,QAAAE,EAAAL,EAAM,MAAM,UAAZ,YAAAK,EAAsB,KAAM,KAAI,EAExDC,EAAUC,IACVC,EAAe,MAAOC,GAAsB,CAChDH,EAAQ,MAAQ,OAEZ,GAAA,CACF,MAAMI,EAAW,MAAMC,EAAM,IAAI,YAAYF,GAAW,EACxDH,EAAQ,MAAQI,EAAS,WAClBE,GACPC,EAAgBD,CAAc,CAChC,CAAA,EAGF,OAAAE,EAAY,IAAM,CACZd,EAAM,MAAM,SAEDQ,EAAAR,EAAM,MAAM,OAAO,CAClC,CACD"}