{"version":3,"file":"Table.vue_vue_type_script_setup_true_lang-89731d70.js","sources":["../../src/components/audio/track/Modal.vue","../../src/components/audio/track/MobileRow.vue","../../src/components/audio/track/PlayIndicator.vue","../../src/components/audio/track/Row.vue","../../src/components/audio/track/Table.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'\nimport type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'\n// import type { Track } from '~/types'\n\nimport { useStore } from '~/store'\nimport { useI18n } from 'vue-i18n'\nimport SemanticModal from '~/components/semantic/Modal.vue'\nimport { computed, ref } from 'vue'\nimport usePlayOptions from '~/composables/audio/usePlayOptions'\nimport useReport from '~/composables/moderation/useReport'\nimport { useVModel } from '@vueuse/core'\n\ninterface Events {\n  (e: 'update:show', value: boolean): void\n}\n\ninterface Props extends PlayOptionsProps {\n  track: Track\n  index: number\n  show: boolean\n\n  isArtist?: boolean\n  isAlbum?: boolean\n\n  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged\n  isPlayable?: boolean\n  tracks?: Track[]\n  artist?: Artist | null\n  album?: Album | null\n  playlist?: Playlist | null\n  library?: Library | null\n  channel?: Channel | null\n  account?: Actor | null\n}\n\nconst emit = defineEmits([\"update:show\"])\nconst props = defineProps({\n  isPlayable: { type: Boolean },\n  tracks: { default: () => [] },\n  track: null,\n  artist: { default: null },\n  album: { default: null },\n  playlist: { default: null },\n  library: { default: null },\n  channel: { default: null },\n  account: { default: null },\n  index: null,\n  show: { type: Boolean },\n  isArtist: { type: Boolean, default: false },\n  isAlbum: { type: Boolean, default: false }\n})\n\nconst modal = ref()\n\nconst show = useVModel(props, 'show', emit)\n\nconst { report, getReportableObjects } = useReport()\nconst { enqueue, enqueueNext } = usePlayOptions(props)\nconst store = useStore()\n\nconst isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))\n\nconst { t } = useI18n()\nconst favoriteButton = computed(() => isFavorite.value\n  ? t('components.audio.track.Modal.button.removeFromFavorites')\n  : t('components.audio.track.Modal.button.addToFavorites')\n)\n\nconst trackDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'\n  ? t('components.audio.track.Modal.button.episodeDetails')\n  : t('components.audio.track.Modal.button.trackDetails')\n)\n\nconst albumDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'\n  ? t('components.audio.track.Modal.button.seriesDetails')\n  : t('components.audio.track.Modal.button.albumDetails')\n)\n\nconst artistDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'\n  ? t('components.audio.track.Modal.button.channelDetails')\n  : t('components.audio.track.Modal.button.artistDetails')\n)\n\nconst labels = computed(() => ({\n  startRadio: t('components.audio.track.Modal.button.startRadio'),\n  playNow: t('components.audio.track.Modal.button.playNow'),\n  addToQueue: t('components.audio.track.Modal.button.addToQueue'),\n  playNext: t('components.audio.track.Modal.button.playNext'),\n  addToPlaylist: t('components.audio.track.Modal.button.addToPlaylist')\n}))\n</script>\n\n<template>\n  <semantic-modal\n    ref=\"modal\"\n    v-model:show=\"show\"\n    :scrolling=\"true\"\n    :additional-classes=\"['scrolling-track-options']\"\n  >\n    <div class=\"header\">\n      <div class=\"ui large centered rounded image\">\n        <img\n          v-if=\"track.album?.cover?.urls.original\"\n          v-lazy=\"$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)\"\n          alt=\"\"\n          class=\"ui centered image\"\n        >\n        <img\n          v-else-if=\"track.cover\"\n          v-lazy=\"$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)\"\n          alt=\"\"\n          class=\"ui centered image\"\n        >\n        <img\n          v-else-if=\"track.artist?.cover\"\n          v-lazy=\"$store.getters['instance/absoluteUrl'](track.artist.cover.urls.medium_square_crop)\"\n          alt=\"\"\n          class=\"ui centered image\"\n        >\n        <img\n          v-else\n          alt=\"\"\n          class=\"ui centered image\"\n          src=\"../../../assets/audio/default-cover.png\"\n        >\n      </div>\n      <h3 class=\"track-modal-title\">\n        {{ track.title }}\n      </h3>\n      <h4 class=\"track-modal-subtitle\">\n        {{ track.artist?.name }}\n      </h4>\n    </div>\n    <div class=\"ui hidden divider\" />\n    <div class=\"content\">\n      <div class=\"ui one column unstackable grid\">\n        <div\n          v-if=\"$store.state.auth.authenticated && track.artist?.content_category !== 'podcast'\"\n          class=\"row\"\n        >\n          <div\n            tabindex=\"0\"\n            class=\"column\"\n            role=\"button\"\n            :aria-label=\"favoriteButton\"\n            @click.stop=\"$store.dispatch('favorites/toggle', track.id)\"\n          >\n            <i :class=\"[ 'heart', 'favorite-icon', { favorited: isFavorite, pink: isFavorite }, 'icon', 'track-modal', 'list-icon' ]\" />\n            <span class=\"track-modal list-item\">{{ favoriteButton }}</span>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div\n            class=\"column\"\n            role=\"button\"\n            :aria-label=\"labels.addToQueue\"\n            @click.stop.prevent=\"enqueue(); modal.closeModal()\"\n          >\n            <i class=\"plus icon track-modal list-icon\" />\n            <span class=\"track-modal list-item\">{{ labels.addToQueue }}</span>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div\n            class=\"column\"\n            role=\"button\"\n            :aria-label=\"labels.playNext\"\n            @click.stop.prevent=\"enqueueNext(true);modal.closeModal()\"\n          >\n            <i class=\"step forward icon track-modal list-icon\" />\n            <span class=\"track-modal list-item\">{{ labels.playNext }}</span>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div\n            class=\"column\"\n            role=\"button\"\n            :aria-label=\"labels.startRadio\"\n            @click.stop.prevent=\"() => { $store.dispatch('radios/start', { type: 'similar', objectId: track.id }); modal.closeModal() }\"\n          >\n            <i class=\"rss icon track-modal list-icon\" />\n            <span class=\"track-modal list-item\">{{ labels.startRadio }}</span>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div\n            class=\"column\"\n            role=\"button\"\n            :aria-label=\"labels.addToPlaylist\"\n            @click.stop=\"$store.commit('playlists/chooseTrack', track)\"\n          >\n            <i class=\"list icon track-modal list-icon\" />\n            <span class=\"track-modal list-item\">\n              {{ labels.addToPlaylist }}\n            </span>\n          </div>\n        </div>\n        <div class=\"ui divider\" />\n        <div\n          v-if=\"!isAlbum && track.album\"\n          class=\"row\"\n        >\n          <div\n            class=\"column\"\n            role=\"button\"\n            :aria-label=\"albumDetailsButton\"\n            @click.prevent.exact=\"$router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })\"\n          >\n            <i class=\"compact disc icon track-modal list-icon\" />\n            <span class=\"track-modal list-item\">{{ albumDetailsButton }}</span>\n          </div>\n        </div>\n        <div\n          v-if=\"!isArtist\"\n          class=\"row\"\n        >\n          <div\n            class=\"column\"\n            role=\"button\"\n            :aria-label=\"artistDetailsButton\"\n            @click.prevent.exact=\"$router.push({ name: 'library.artists.detail', params: { id: track.artist?.id } })\"\n          >\n            <i class=\"user icon track-modal list-icon\" />\n            <span class=\"track-modal list-item\">{{ artistDetailsButton }}</span>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div\n            class=\"column\"\n            role=\"button\"\n            :aria-label=\"trackDetailsButton\"\n            @click.prevent.exact=\"$router.push({ name: 'library.tracks.detail', params: { id: track.id } })\"\n          >\n            <i class=\"info icon track-modal list-icon\" />\n            <span class=\"track-modal list-item\">{{ trackDetailsButton }}</span>\n          </div>\n        </div>\n        <div class=\"ui divider\" />\n        <div\n          v-for=\"obj in getReportableObjects({ track, album: track.album, artist: track.artist })\"\n          :key=\"obj.target.type + obj.target.id\"\n          class=\"row\"\n          @click.stop.prevent=\"report(obj)\"\n        >\n          <div class=\"column\">\n            <i class=\"share icon track-modal list-icon\" />\n            <span class=\"track-modal list-item\">{{ obj.label }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </semantic-modal>\n</template>\n","<script setup lang=\"ts\">\nimport type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'\nimport type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'\n\nimport { ref, computed } from 'vue'\nimport { useI18n } from 'vue-i18n'\n\nimport { usePlayer } from '~/composables/audio/player'\nimport { useQueue } from '~/composables/audio/queue'\n\nimport usePlayOptions from '~/composables/audio/usePlayOptions'\n\nimport TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'\nimport TrackModal from '~/components/audio/track/Modal.vue'\n\ninterface Props extends PlayOptionsProps {\n  track: Track\n  index: number\n\n  showArt?: boolean\n  isArtist?: boolean\n  isAlbum?: boolean\n\n  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged\n  isPlayable?: boolean\n  tracks?: Track[]\n  artist?: Artist | null\n  album?: Album | null\n  playlist?: Playlist | null\n  library?: Library | null\n  channel?: Channel | null\n  account?: Actor | null\n}\n\nconst props = defineProps({\n  isPlayable: { type: Boolean },\n  tracks: { default: () => [] },\n  track: null,\n  artist: { default: null },\n  album: { default: null },\n  playlist: { default: null },\n  library: { default: null },\n  channel: { default: null },\n  account: { default: null },\n  index: null,\n  showArt: { type: Boolean, default: true },\n  isArtist: { type: Boolean, default: false },\n  isAlbum: { type: Boolean, default: false }\n})\n\nconst showTrackModal = ref(false)\n\nconst { currentTrack } = useQueue()\nconst { isPlaying } = usePlayer()\nconst { activateTrack } = usePlayOptions(props)\n\nconst { t } = useI18n()\nconst actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.button.actions'))\n</script>\n\n<template>\n  <div\n    :class=\"[\n      { active: currentTrack && track.id === currentTrack.id },\n      'track-row row mobile',\n    ]\"\n  >\n    <div\n      v-if=\"showArt\"\n      class=\"image left floated column\"\n      @click.prevent.exact=\"activateTrack(track, index)\"\n    >\n      <img\n        v-if=\"track.album?.cover?.urls.original\"\n        v-lazy=\"$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)\"\n        alt=\"\"\n        class=\"ui artist-track mini image\"\n      >\n      <img\n        v-else-if=\"track.cover\"\n        v-lazy=\"$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)\"\n        alt=\"\"\n        class=\"ui artist-track mini image\"\n      >\n      <img\n        v-else-if=\"track.artist?.cover\"\n        v-lazy=\"$store.getters['instance/absoluteUrl'](track.artist.cover.urls.medium_square_crop)\"\n        alt=\"\"\n        class=\"ui artist-track mini image\"\n      >\n      <img\n        v-else\n        alt=\"\"\n        class=\"ui artist-track mini image\"\n        src=\"../../../assets/audio/default-cover.png\"\n      >\n    </div>\n    <div\n      tabindex=\"0\"\n      role=\"button\"\n      class=\"content ellipsis left floated column\"\n      @click=\"activateTrack(track, index)\"\n    >\n      <p\n        :class=\"[\n          'track-title',\n          'mobile',\n          { 'play-indicator': isPlaying && track.id === currentTrack?.id },\n        ]\"\n      >\n        {{ track.title }}\n      </p>\n      <p class=\"track-meta mobile\">\n        {{ track.artist?.name }}\n        <span class=\"middle middledot symbol\" />\n        <human-duration\n          v-if=\"track.uploads[0] && track.uploads[0].duration\"\n          :duration=\"track.uploads[0].duration\"\n        />\n      </p>\n    </div>\n    <div\n      v-if=\"$store.state.auth.authenticated\"\n      :class=\"[\n        'meta',\n        'right',\n        'floated',\n        'column',\n        'mobile',\n        { 'with-art': showArt },\n      ]\"\n      role=\"button\"\n    >\n      <track-favorite-icon\n        class=\"tiny\"\n        :border=\"false\"\n        :track=\"track\"\n      />\n    </div>\n    <div\n      role=\"button\"\n      :aria-label=\"actionsButtonLabel\"\n      :class=\"[\n        'modal-button',\n        'right',\n        'floated',\n        'column',\n        'mobile',\n        { 'with-art': showArt },\n      ]\"\n      @click.prevent.exact=\"showTrackModal = !showTrackModal\"\n    >\n      <i class=\"ellipsis large vertical icon\" />\n    </div>\n    <track-modal\n      v-model:show=\"showTrackModal\"\n      :track=\"track\"\n      :index=\"index\"\n      :is-artist=\"isArtist\"\n      :is-album=\"isAlbum\"\n    />\n  </div>\n</template>\n","<template>\n  <div id=\"audio-bars\">\n    <div class=\"audio-bar\" />\n    <div class=\"audio-bar\" />\n    <div class=\"audio-bar\" />\n    <div class=\"audio-bar\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'\nimport type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'\n\nimport { computed, ref } from 'vue'\n\nimport usePlayOptions from '~/composables/audio/usePlayOptions'\n\nimport TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'\nimport PlayIndicator from '~/components/audio/track/PlayIndicator.vue'\nimport PlayButton from '~/components/audio/PlayButton.vue'\nimport { usePlayer } from '~/composables/audio/player'\nimport { useQueue } from '~/composables/audio/queue'\n\ninterface Props extends PlayOptionsProps {\n  track: Track\n  index: number\n\n  showAlbum?: boolean\n  showArt?: boolean\n  showArtist?: boolean\n  showDuration?: boolean\n  showPosition?: boolean\n  displayActions?: boolean\n\n  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged\n  tracks: Track[]\n  isPlayable?: boolean\n  artist?: Artist | null\n  album?: Album | null\n  playlist?: Playlist | null\n  library?: Library | null\n  channel?: Channel | null\n  account?: Actor | null\n}\n\nconst props = defineProps({\n  isPlayable: { type: Boolean },\n  tracks: null,\n  track: null,\n  artist: { default: null },\n  album: { default: null },\n  playlist: { default: null },\n  library: { default: null },\n  channel: { default: null },\n  account: { default: null },\n  index: null,\n  showAlbum: { type: Boolean, default: true },\n  showArt: { type: Boolean, default: true },\n  showArtist: { type: Boolean, default: true },\n  showDuration: { type: Boolean, default: true },\n  showPosition: { type: Boolean, default: false },\n  displayActions: { type: Boolean, default: true }\n})\n\nconst { activateTrack } = usePlayOptions(props)\nconst { isPlaying, loading } = usePlayer()\nconst { currentTrack } = useQueue()\n\nconst active = computed(() => props.track.id === currentTrack.value?.id && props.track.position === currentTrack.value?.position)\nconst hover = ref(false)\n</script>\n\n<template>\n  <div\n    :class=\"[{ active }, 'track-row row']\"\n    @dblclick=\"activateTrack(track, index)\"\n    @mousemove=\"hover = true\"\n    @mouseout=\"hover = false\"\n  >\n    <div\n      class=\"actions one wide left floated column\"\n      role=\"button\"\n      @click.prevent.exact=\"activateTrack(track, index)\"\n    >\n      <play-indicator\n        v-if=\"\n          !loading &&\n            isPlaying &&\n            active &&\n            !hover\n        \"\n      />\n      <button\n        v-else-if=\"\n          !isPlaying &&\n            active &&\n            !hover\n        \"\n        class=\"ui really tiny basic icon button play-button paused\"\n      >\n        <i class=\"play icon\" />\n      </button>\n      <button\n        v-else-if=\"\n          isPlaying &&\n            active &&\n            hover\n        \"\n        class=\"ui really tiny basic icon button play-button\"\n      >\n        <i class=\"pause icon\" />\n      </button>\n      <button\n        v-else-if=\"hover\"\n        class=\"ui really tiny basic icon button play-button\"\n      >\n        <i class=\"play icon\" />\n      </button>\n      <span\n        v-else-if=\"showPosition\"\n        class=\"track-position\"\n      >\n        {{ `${track.position}`.padStart(2, '0') }}\n      </span>\n    </div>\n    <div\n      v-if=\"showArt\"\n      class=\"image left floated column\"\n      role=\"button\"\n      @click.prevent.exact=\"activateTrack(track, index)\"\n    >\n      <img\n        v-if=\"track.album?.cover?.urls.original\"\n        v-lazy=\"$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)\"\n        alt=\"\"\n        class=\"ui artist-track mini image\"\n      >\n      <img\n        v-else-if=\"track.cover?.urls.original\"\n        v-lazy=\"$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)\"\n        alt=\"\"\n        class=\"ui artist-track mini image\"\n      >\n      <img\n        v-else-if=\"track.artist?.cover?.urls.original\"\n        v-lazy=\"$store.getters['instance/absoluteUrl'](track.artist.cover.urls.medium_square_crop) \"\n        alt=\"\"\n        class=\"ui artist-track mini image\"\n      >\n      <img\n        v-else\n        alt=\"\"\n        class=\"ui artist-track mini image\"\n        src=\"../../../assets/audio/default-cover.png\"\n      >\n    </div>\n    <div\n      tabindex=\"0\"\n      class=\"content ellipsis left floated column\"\n    >\n      <a\n        @click=\"activateTrack(track, index)\"\n      >\n        {{ track.title }}\n      </a>\n    </div>\n    <div\n      v-if=\"showAlbum\"\n      class=\"content ellipsis left floated column\"\n    >\n      <router-link\n        :to=\"{ name: 'library.albums.detail', params: { id: track.album?.id } }\"\n      >\n        {{ track.album?.title }}\n      </router-link>\n    </div>\n    <div\n      v-if=\"showArtist\"\n      class=\"content ellipsis left floated column\"\n    >\n      <router-link\n        class=\"artist link\"\n        :to=\"{\n          name: 'library.artists.detail',\n          params: { id: track.artist?.id },\n        }\"\n      >\n        {{ track.artist?.name }}\n      </router-link>\n    </div>\n    <div\n      v-if=\"$store.state.auth.authenticated\"\n      class=\"meta right floated column\"\n    >\n      <track-favorite-icon\n        class=\"tiny\"\n        :border=\"false\"\n        :track=\"track\"\n      />\n    </div>\n    <div\n      v-if=\"showDuration\"\n      class=\"meta right floated column\"\n    >\n      <human-duration\n        v-if=\"track.uploads[0] && track.uploads[0].duration\"\n        :duration=\"track.uploads[0].duration\"\n      />\n    </div>\n    <div\n      v-if=\"displayActions\"\n      class=\"meta right floated column\"\n    >\n      <play-button\n        id=\"playmenu\"\n        class=\"play-button basic icon\"\n        :dropdown-only=\"true\"\n        :is-playable=\"track.is_playable\"\n        :dropdown-icon-classes=\"[\n          'ellipsis',\n          'vertical',\n          'large really discrete',\n        ]\"\n        :track=\"track\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Track } from '~/types'\n\nimport { useI18n } from 'vue-i18n'\nimport { clone, uniqBy } from 'lodash-es'\nimport { ref, computed } from 'vue'\n\nimport axios from 'axios'\n\nimport TrackMobileRow from '~/components/audio/track/MobileRow.vue'\nimport Pagination from '~/components/vui/Pagination.vue'\nimport TrackRow from '~/components/audio/track/Row.vue'\n\nimport useErrorHandler from '~/composables/useErrorHandler'\n\ninterface Events {\n  (e: 'fetched'): void\n  (e: 'page-changed', page: number): void\n}\n\ninterface Props {\n  tracks?: undefined | Track[]\n\n  showAlbum?: boolean\n  showArtist?: boolean\n  showPosition?: boolean\n  showArt?: boolean\n  showDuration?: boolean\n  search?: boolean\n  displayActions?: boolean\n  isArtist?: boolean\n  isAlbum?: boolean\n  isPodcast?: boolean\n\n  filters?: object\n\n  nextUrl?: string | null\n\n  paginateResults?: boolean\n  total?: number\n  page?: number\n  paginateBy?: number,\n\n  unique?: boolean\n}\n\nconst emit = defineEmits([\"fetched\", \"page-changed\"])\nconst props = defineProps({\n  tracks: { default: undefined },\n  showAlbum: { type: Boolean, default: true },\n  showArtist: { type: Boolean, default: true },\n  showPosition: { type: Boolean, default: false },\n  showArt: { type: Boolean, default: true },\n  showDuration: { type: Boolean, default: true },\n  search: { type: Boolean, default: false },\n  displayActions: { type: Boolean, default: true },\n  isArtist: { type: Boolean, default: false },\n  isAlbum: { type: Boolean, default: false },\n  isPodcast: { type: Boolean, default: false },\n  filters: { default: () => ({}) },\n  nextUrl: { default: null },\n  paginateResults: { type: Boolean, default: true },\n  total: { default: 0 },\n  page: { default: 1 },\n  paginateBy: { default: 25 },\n  unique: { type: Boolean, default: true }\n})\n\nconst currentPage = ref(props.page)\nconst totalTracks = ref(props.total)\nconst fetchDataUrl = ref(props.nextUrl)\nconst additionalTracks = ref([] as Track[])\nconst query = ref('')\n\nconst allTracks = computed(() => {\n  const tracks = [...(props.tracks ?? []), ...additionalTracks.value]\n  return props.unique\n    ? uniqBy(tracks, 'id')\n    : tracks\n})\n\nconst { t } = useI18n()\nconst labels = computed(() => ({\n  title: t('components.audio.track.Table.table.header.title'),\n  album: t('components.audio.track.Table.table.header.album'),\n  artist: t('components.audio.track.Table.table.header.artist')\n}))\n\nconst isLoading = ref(false)\nconst fetchData = async () => {\n  isLoading.value = true\n\n  const params = {\n    ...clone(props.filters),\n    page_size: props.paginateBy,\n    page: currentPage.value,\n    include_channels: true,\n    q: query.value\n  }\n\n  try {\n    const response = await axios.get('tracks/', { params })\n\n    // TODO (wvffle): Fetch continuously?\n    fetchDataUrl.value = response.data.next\n    additionalTracks.value = response.data.results\n    totalTracks.value = response.data.count\n    emit('fetched')\n  } catch (error) {\n    useErrorHandler(error as Error)\n  }\n\n  isLoading.value = false\n}\n\nconst performSearch = () => {\n  currentPage.value = 1\n  additionalTracks.value = []\n  fetchData()\n}\n\nif (props.tracks === undefined) {\n  fetchData()\n}\n\nconst updatePage = (page: number) => {\n  if (props.tracks === undefined) {\n    currentPage.value = page\n    fetchData()\n  } else {\n    emit('page-changed', page)\n  }\n}\n</script>\n\n<template>\n  <div>\n    <!-- Show the search bar if search is true -->\n    <inline-search-bar\n      v-if=\"search\"\n      v-model=\"query\"\n      @search=\"performSearch\"\n    />\n\n    <!-- Add a header if needed -->\n\n    <slot name=\"header\" />\n\n    <!-- Show a message if no tracks are available -->\n\n    <slot\n      v-if=\"!isLoading && allTracks.length === 0\"\n      name=\"empty-state\"\n    >\n      <empty-state\n        :refresh=\"true\"\n        @refresh=\"fetchData()\"\n      />\n    </slot>\n    <div v-else>\n      <div\n        :class=\"['track-table', 'ui', 'unstackable', 'grid', 'tablet-and-up']\"\n      >\n        <div\n          v-if=\"isLoading\"\n          class=\"ui inverted active dimmer\"\n        >\n          <div class=\"ui loader\" />\n        </div>\n        <div class=\"track-table row\">\n          <div\n            v-if=\"showPosition\"\n            class=\"actions left floated column\"\n          >\n            <i class=\"hashtag icon\" />\n          </div>\n          <div\n            v-else\n            class=\"actions left floated column\"\n          />\n          <div\n            v-if=\"showArt\"\n            class=\"image left floated column\"\n          />\n          <div class=\"content ellipsis left floated column\">\n            <b>{{ labels.title }}</b>\n          </div>\n          <div\n            v-if=\"showAlbum\"\n            class=\"content ellipsisleft floated column\"\n          >\n            <b>{{ labels.album }}</b>\n          </div>\n          <div\n            v-if=\"showArtist\"\n            class=\"content ellipsis left floated column\"\n          >\n            <b>{{ labels.artist }}</b>\n          </div>\n          <div\n            v-if=\"$store.state.auth.authenticated\"\n            class=\"meta right floated column\"\n          />\n          <div\n            v-if=\"showDuration\"\n            class=\"meta right floated column\"\n          >\n            <i\n              class=\"clock outline icon\"\n              style=\"padding: 0.5rem\"\n            />\n          </div>\n          <div\n            v-if=\"displayActions\"\n            class=\"meta right floated column\"\n          />\n        </div>\n\n        <!-- For each item, build a row -->\n\n        <track-row\n          v-for=\"(track, index) in allTracks\"\n          :key=\"`${track.id} ${track.position}`\"\n          :track=\"track\"\n          :index=\"index\"\n          :tracks=\"allTracks\"\n          :show-album=\"showAlbum\"\n          :show-artist=\"showArtist\"\n          :show-position=\"showPosition\"\n          :show-art=\"showArt\"\n          :display-actions=\"displayActions\"\n          :show-duration=\"showDuration\"\n          :is-podcast=\"isPodcast\"\n        />\n      </div>\n      <div\n        v-if=\"tracks && paginateResults\"\n        class=\"ui center aligned basic segment desktop-and-up\"\n      >\n        <pagination\n          :total=\"totalTracks\"\n          :current=\"tracks !== undefined ? page : currentPage\"\n          :paginate-by=\"paginateBy\"\n          @update:current=\"updatePage\"\n        />\n      </div>\n    </div>\n\n    <div\n      :class=\"['track-table', 'ui', 'unstackable', 'grid', 'tablet-and-below']\"\n    >\n      <div\n        v-if=\"isLoading\"\n        class=\"ui inverted active dimmer\"\n      >\n        <div class=\"ui loader\" />\n      </div>\n\n      <!-- For each item, build a row -->\n\n      <track-mobile-row\n        v-for=\"(track, index) in allTracks\"\n        :key=\"track.id\"\n        :track=\"track\"\n        :index=\"index\"\n        :tracks=\"allTracks\"\n        :show-position=\"showPosition\"\n        :show-art=\"showArt\"\n        :show-duration=\"showDuration\"\n        :is-artist=\"isArtist\"\n        :is-album=\"isAlbum\"\n        :is-podcast=\"isPodcast\"\n      />\n      <div\n        v-if=\"tracks && paginateResults && totalTracks > paginateBy\"\n        class=\"ui center aligned basic segment tablet-and-below\"\n      >\n        <pagination\n          v-if=\"paginateResults && totalTracks > paginateBy\"\n          :paginate-by=\"paginateBy\"\n          :total=\"totalTracks\"\n          :current=\"tracks !== undefined ? page : currentPage\"\n          :compact=\"true\"\n          @update:current=\"updatePage\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["emit","__emit","props","__props","modal","ref","show","useVModel","report","getReportableObjects","useReport","enqueue","enqueueNext","usePlayOptions","store","useStore","isFavorite","computed","t","useI18n","favoriteButton","trackDetailsButton","_a","albumDetailsButton","artistDetailsButton","labels","showTrackModal","currentTrack","useQueue","isPlaying","usePlayer","activateTrack","actionsButtonLabel","_createElementVNode","_hoisted_6","_hoisted_2","_hoisted_3","_hoisted_4","_sfc_render","_ctx","_cache","loading","active","_b","hover","currentPage","totalTracks","fetchDataUrl","additionalTracks","query","allTracks","tracks","uniqBy","isLoading","fetchData","params","clone","response","axios","error","useErrorHandler","performSearch","updatePage","page"],"mappings":"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"}