@ozdao/martyrs 0.2.492 → 0.2.493

package/dist/martyrs/src/modules/music/components/pages/Album.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Album.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Album.vue"],"sourcesContent":["<!-- components/pages/Album.vue -->\n<template>\n  <div class=\"album-page\">\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n    \n    <div v-else-if=\"!album\" class=\"t-center pd-big\">\n      <h2 class=\"\">Album not found</h2>\n      <p class=\"t-grey t-medium\">The album you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <div v-else>\n      <!-- Album Header -->\n      <div class=\"album-header mn-b-medium flex flex-v-center gap-medium\">\n        <div class=\"album-cover\">\n          <Media \n            :url=\"album.coverUrl || '/assets/placeholder-album.jpg'\" \n            class=\"w-15r h-15r object-fit-cover shadow-lg radius-small\"\n          />\n        </div>\n        \n        <div class=\"album-info\">\n          <div class=\"t-small t-uppercase \">Album</div>\n          <h1 class=\"\">{{ album.title }}</h1>\n          \n          <div class=\"album-meta mn-t-small flex flex-v-center\">\n            <router-link \n              v-if=\"album.artist && album.artist._id\"\n              :to=\"{ name: 'artist', params: { url: album.artist.url } }\"\n              class=\" t-medium hover-t-main\"\n            >\n              {{ getArtistName(album) }}\n            </router-link>\n            <span v-else class=\" t-medium\">{{ getArtistName(album) }}</span>\n            \n            <span class=\"t-grey mn-l-small mn-r-small\">•</span>\n            \n            <span class=\"t-grey\">{{ formatReleaseYear(album.releaseDate) }}</span>\n            \n            <span class=\"t-grey mn-l-small mn-r-small\">•</span>\n            \n            <span class=\"t-grey\">{{ albumTracks.length }} {{ albumTracks.length === 1 ? 'song' : 'songs' }}</span>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Album Actions -->\n      <div class=\"album-actions mn-b-medium flex flex-v-center gap-small\">\n        <Button \n          @click=\"playAlbum\"\n          class=\"play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\"/>\n          <span class=\"t-black t-medium\">Play</span>\n        </Button>\n        \n        <Button \n          @click=\"toggleFavorite\"\n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'\"/>\n        </Button>\n        \n        <Dropdown class=\"pos-relative\">\n          <Button \n            @click=\"showDropdown = !showDropdown\"\n            class=\"bg-transparent border-none pd-zero\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconEllipsis class=\"i-medium\" fill=\"rgb(var(--white))\"/>\n          </Button>\n          \n          <template #content>\n            <ul v-if=\"showDropdown\" class=\"pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin\">\n              <li class=\"mn-b-thin\">\n                <Button \n                  @click=\"addToQueue\"\n                  class=\"bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Add to Queue</span>\n                </Button>\n              </li>\n              <li>\n                <Button \n                  @click=\"copyLink\"\n                  class=\"bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Copy Link</span>\n                </Button>\n              </li>\n            </ul>\n          </template>\n        </Dropdown>\n      </div>\n      \n      <!-- Album Tracks -->\n      <div class=\"album-tracks\">\n        <Feed\n          :store=\"{\n            read: () => Promise.resolve(albumTracks),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"albumTracks\"\n          :states=\"{\n            empty: {\n              title: 'No tracks in album',\n              description: 'This album appears to be empty',\n              class: 'pd-medium bg-dark-transp-10 radius-medium'\n            }\n          }\"\n          class=\"gap-thin\"\n        >\n          <template #default=\"{ items }\">\n            <TrackCard\n              v-for=\"track in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :showAlbum=\"false\"\n              :showCover=\"false\"\n              class=\"w-100 bg-dark-transp-10 radius-medium\"\n            />\n          </template>\n        </Feed>\n      </div>\n      \n      <!-- Album Info -->\n      <div v-if=\"album.description\" class=\"album-description mn-t-medium pd-medium bg-dark-transp-10 radius-medium\">\n        <h3 class=\" mn-b-small\">About</h3>\n        <p class=\"t-grey\">{{ album.description }}</p>\n      </div>\n      \n      <!-- More from this artist if available -->\n      <div v-if=\"moreFromArtist.length > 0\" class=\"more-from-artist mn-t-medium\">\n        <div class=\"flex-between flex mn-b-small\">\n          <h2 class=\"\">More by {{ getArtistName(album) }}</h2>\n          <router-link \n            v-if=\"album.artist && album.artist._id\"\n            :to=\"{ name: 'artist', params: { url: album.artist.url } }\" \n            class=\"t-main t-small hover-opacity\"\n          >\n            See all\n          </router-link>\n        </div>\n        \n        <div class=\"albums-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"relatedAlbum in moreFromArtist\" :key=\"relatedAlbum._id\">\n            <AlbumCard :album=\"relatedAlbum\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackCard from '../cards/TrackCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\n\n// Import icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\n\n// Import store modules\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { actions as playerActions } from '../../store/player.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// State\nconst isLoading = ref(true);\nconst isFavorite = ref(false);\nconst showDropdown = ref(false);\nconst moreFromArtist = ref([]);\n\n// Computed properties\nconst album = computed(() => albumsState.currentAlbum);\nconst albumTracks = computed(() => albumsState.currentAlbumTracks);\n\n// Methods\nconst getArtistName = (albumItem) => {\n  if (!albumItem) return 'Unknown Artist';\n  \n  if (albumItem.artist) {\n    if (typeof albumItem.artist === 'object') {\n      return albumItem.artist.name || 'Unknown Artist';\n    }\n    return albumItem.artist;\n  }\n  return 'Unknown Artist';\n};\n\nconst formatReleaseYear = (dateString) => {\n  if (!dateString) return '';\n  return new Date(dateString).getFullYear();\n};\n\nconst playAlbum = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    playerActions.setQueue(albumTracks.value);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // Implement favorite album logic here\n};\n\nconst addToQueue = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    // Add all tracks to queue\n    albumTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    \n    showDropdown.value = false;\n  }\n};\n\nconst copyLink = () => {\n  const url = window.location.href;\n  navigator.clipboard.writeText(url).then(() => {\n    // Could show a success notification here\n    showDropdown.value = false;\n  });\n};\n\nconst fetchAlbumData = async () => {\n  isLoading.value = true;\n  \n  try {\n    // Fetch album data\n    await albumsActions.fetchAlbumByUrl(route.params.url);\n    \n    // If artist is available, fetch more albums from the same artist\n    if (album.value?.artist?._id) {\n      const artistAlbums = await albumsActions.fetchAlbums({\n        artist: album.value.artist._id,\n        status: 'published',\n        isPublic: true,\n        limit: 5\n      });\n      \n      // Filter out the current album\n      moreFromArtist.value = artistAlbums.filter(a => a._id !== album.value._id);\n    }\n  } catch (error) {\n    console.error('Error fetching album data:', error);\n  } finally {\n    isLoading.value = false;\n  }\n};\n\n// Fetch data when component mounts or URL changes\nonMounted(fetchAlbumData);\n\nwatch(() => route.params.url, (newUrl) => {\n  if (newUrl) {\n    fetchAlbumData();\n  }\n});\n</script>\n\n<style scoped>\n.album-cover {\n  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);\n}\n</style>"],"names":["albumsState","playerActions","albumsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyLA,UAAM,QAAQ,SAAQ;AACP,cAAS;AAGxB,UAAM,YAAY,IAAI,IAAI;AAC1B,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,eAAe,IAAI,KAAK;AAC9B,UAAM,iBAAiB,IAAI,EAAE;AAG7B,UAAM,QAAQ,SAAS,MAAMA,MAAY,YAAY;AACrD,UAAM,cAAc,SAAS,MAAMA,MAAY,kBAAkB;AAGjE,UAAM,gBAAgB,CAAC,cAAc;AACnC,UAAI,CAAC,UAAW,QAAO;AAEvB,UAAI,UAAU,QAAQ;AACpB,YAAI,OAAO,UAAU,WAAW,UAAU;AACxC,iBAAO,UAAU,OAAO,QAAQ;AAAA,QAClC;AACA,eAAO,UAAU;AAAA,MACnB;AACA,aAAO;AAAA,IACT;AAEA,UAAM,oBAAoB,CAAC,eAAe;AACxC,UAAI,CAAC,WAAY,QAAO;AACxB,aAAO,IAAI,KAAK,UAAU,EAAE,YAAW;AAAA,IACzC;AAEA,UAAM,YAAY,MAAM;AACtB,UAAI,YAAY,SAAS,YAAY,MAAM,SAAS,GAAG;AACrDC,kBAAc,SAAS,YAAY,KAAK;AAAA,MAC1C;AAAA,IACF;AAEA,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IAEjC;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,YAAY,SAAS,YAAY,MAAM,SAAS,GAAG;AAErD,oBAAY,MAAM,QAAQ,WAAS;AACjCA,oBAAc,WAAW,KAAK;AAAA,QAChC,CAAC;AAED,qBAAa,QAAQ;AAAA,MACvB;AAAA,IACF;AAEA,UAAM,WAAW,MAAM;AACrB,YAAM,MAAM,OAAO,SAAS;AAC5B,gBAAU,UAAU,UAAU,GAAG,EAAE,KAAK,MAAM;AAE5C,qBAAa,QAAQ;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,UAAM,iBAAiB,YAAY;AACjC,gBAAU,QAAQ;AAElB,UAAI;AAEF,cAAMC,QAAc,gBAAgB,MAAM,OAAO,GAAG;AAGpD,YAAI,MAAM,OAAO,QAAQ,KAAK;AAC5B,gBAAM,eAAe,MAAMA,QAAc,YAAY;AAAA,YACnD,QAAQ,MAAM,MAAM,OAAO;AAAA,YAC3B,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,OAAO;AAAA,UACf,CAAO;AAGD,yBAAe,QAAQ,aAAa,OAAO,OAAK,EAAE,QAAQ,MAAM,MAAM,GAAG;AAAA,QAC3E;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,8BAA8B,KAAK;AAAA,MACnD,UAAC;AACC,kBAAU,QAAQ;AAAA,MACpB;AAAA,IACF;AAGA,cAAU,cAAc;AAExB,UAAM,MAAM,MAAM,OAAO,KAAK,CAAC,WAAW;AACxC,UAAI,QAAQ;AACV,uBAAc;AAAA,MAChB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Album.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Album.vue"],"sourcesContent":["<!-- components/pages/Album.vue -->\n<template>\n  <div class=\"album-page pd-small\">\n    <!-- Loading -->\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n    \n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !album\" class=\"t-center pd-big\">\n      <h2 class=\"\">Album not found</h2>\n      <p class=\"t-transp t-medium\">The album you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <!-- Album Content -->\n    <div v-if=\"album\" class=\"album-content cols-2-fit-content mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky pos-t-0 mobile:pos-relative album-cover-section\">\n        <!-- Cover -->\n        <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n          <Media \n            :url=\"album.coverArt || '/logo/logo-placeholder.jpg'\"\n            :alt=\"album.title\"\n            class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n          />\n        </div>\n\n        <!-- Quick Stats -->\n        <div class=\"stats-grid grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ album.totalTracks || 0 }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Tracks</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(album.views) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Views</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Album Details -->\n      <div class=\"album-details-section\">\n        <!-- Album Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n          <span class=\"badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase\">\n            {{ album.type }}\n          </span>\n          <span v-if=\"album.status === 'published'\" class=\"badge bg-success-transp-20 t-success pd-thin-big radius-small t-small\">\n            Published\n          </span>\n        </div>\n\n        <!-- Album Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ album.title }}</h1>\n\n        <!-- Action Buttons -->\n        <div class=\"flex gap-small mn-b-medium\">\n          <Button\n            @click=\"playAlbum\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 flex-center gap-thin\"\n          >\n            <IconPlay class=\"w-1r h-1r\" />\n            Play All\n          </Button>\n          \n          <Button\n            @click=\"toggleFavorite\"\n            :color=\"isFavorite ? 'danger' : 'transp'\"\n            size=\"medium\"\n            class=\"w-3r h-3r radius-full\"\n          >\n            <IconLike class=\"w-1-25r h-1-25r\" :fill=\"isFavorite\" />\n          </Button>\n          \n          <Button\n            @click=\"shufflePlay\"\n            color=\"transp\"\n            size=\"medium\"\n            class=\"w-3r h-3r radius-full\"\n          >\n            <IconShuffle class=\"w-1-25r h-1-25r\" />\n          </Button>\n          \n          <Dropdown v-model=\"showDropdown\" class=\"relative\">\n            <template #trigger>\n              <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n                <IconEllipsis class=\"w-1-25r h-1-25r\" />\n              </Button>\n            </template>\n            <template #default>\n              <div class=\"dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin\">\n                <Button @click=\"addToQueue\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n                  Add to Queue\n                </Button>\n                <Button @click=\"copyLink\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n                  Copy Link\n                </Button>\n                <template v-if=\"isOwner\">\n                  <hr class=\"mn-v-thin border-dark-transp-10\" />\n                  <Button @click=\"editAlbum\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n                    Edit Album\n                  </Button>\n                  <Button @click=\"deleteAlbum\" color=\"danger\" size=\"small\" class=\"w-100 justify-start\">\n                    Delete Album\n                  </Button>\n                </template>\n              </div>\n            </template>\n          </Dropdown>\n        </div>\n\n        <!-- Artists Cards -->\n        <div class=\"artists-section mn-b-big\">\n          <h3 class=\"t-medium mn-b-small\" v-if=\"album.artists && album.artists.length > 1\">Artists</h3>\n          <div class=\"flex flex-col gap-small\">\n            <div \n              v-for=\"artist in album.artists\" \n              :key=\"artist._id\"\n              class=\"artist-card bg-light pd-medium radius-medium flex items-center gap-medium\"\n            >\n              <router-link \n                :to=\"`/artist/${artist.url}`\"\n                class=\"flex items-center gap-medium flex-1 hover-opacity\"\n              >\n                <div class=\"artist-avatar\">\n                  <Media \n                    v-if=\"artist.photoUrl\"\n                    :url=\"artist.photoUrl\"\n                    :alt=\"artist.name\"\n                    class=\"w-4r h-4r radius-full object-cover\"\n                  />\n                  <div v-else class=\"w-4r h-4r radius-full bg-primary flex-center \">\n                    {{ artist.name.charAt(0) }}\n                  </div>\n                </div>\n                <div>\n                  <div class=\"flex items-center gap-thin\">\n                    <span class=\"t-large \">{{ artist.name }}</span>\n                    <IconVerified v-if=\"artist.isVerified\" class=\"w-1r h-1r t-primary\" />\n                  </div>\n                  <span class=\"t-small t-transp\">Artist</span>\n                </div>\n              </router-link>\n              <Button \n                v-if=\"!isOwner\"\n                @click=\"() => toggleFollowArtist(artist._id)\"\n                :color=\"followedArtists.includes(artist._id) ? 'primary' : 'transp'\"\n                size=\"small\"\n              >\n                {{ followedArtists.includes(artist._id) ? 'Following' : 'Follow' }}\n              </Button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Metadata Cards -->\n        <div class=\"metadata-grid grid cols-2 gap-small mn-b-big\">\n          <!-- Release Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n            <div class=\"icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center\">\n              <IconCalendar class=\"w-1-5r h-1-5r t-primary\" />\n            </div>\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Released</div>\n              <div class=\"t-medium \">{{ formatDate(album.releaseDate) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n            <div class=\"icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center\">\n              <IconClock class=\"w-1-5r h-1-5r t-primary\" />\n            </div>\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"t-medium \">{{ totalDuration }}</div>\n            </div>\n          </div>\n\n          <!-- Label -->\n          <div v-if=\"album.label\" class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n            <div class=\"icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center\">\n              <IconDisc class=\"w-1-5r h-1-5r t-primary\" />\n            </div>\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Label</div>\n              <div class=\"t-medium \">{{ album.label }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n            <div class=\"icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center\">\n              <IconEye class=\"w-1-5r h-1-5r t-primary\" />\n            </div>\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"t-medium \">{{ album.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Genres & Tags -->\n        <div v-if=\"(album.genres && album.genres.length) || (album.tags && album.tags.length)\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Genres & Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"genre in album.genres\" \n              :key=\"genre\"\n              class=\"tag bg-primary-transp-20 t-primary pd-thin-big radius-small t-small hover-bg-primary-transp-30 cursor-pointer\"\n            >\n              {{ genre }}\n            </span>\n            <span \n              v-for=\"tag in album.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n            >\n              #{{ tag }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Description -->\n        <div v-if=\"album.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">About</h3>\n          <p class=\"t-transp\">{{ album.description }}</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Album Tracks -->\n    <section v-if=\"!isLoading && album && albumTracks.length\" class=\"tracks-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n      <Feed\n        :store=\"{\n          read: () => Promise.resolve(albumTracks),\n          state: { isLoading: false }\n        }\"\n        :external=\"true\"\n        :items=\"albumTracks\"\n        :states=\"{\n          empty: {\n            title: 'No tracks in album',\n            description: 'This album appears to be empty',\n            class: 'pd-medium t-center'\n          }\n        }\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(track, index) in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :index=\"index + 1\"\n              :showAlbum=\"false\"\n              :showCover=\"false\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- More from Artists -->\n    <section v-if=\"!isLoading && album && moreAlbums.length\" class=\"more-albums-section mn-t-big\">\n      <div class=\"flex justify-between items-center mn-b-medium\">\n        <h2 class=\"h2\">More Albums</h2>\n        <router-link \n          v-if=\"album.artists && album.artists[0]\"\n          :to=\"`/artist/${album.artists[0].url}`\" \n          class=\"t-primary hover-opacity\"\n        >\n          See all\n        </router-link>\n      </div>\n      <div  class=\"flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide\"\n      >\n        <li v-for=\"relatedAlbum in moreAlbums\"  :key=\"album._id\" class=\"flex-none scroll-snap-align-start\">\n          <AlbumCard :album=\"relatedAlbum\" class=\"w-min-15r transition-cubic-in-out\" />\n        </li>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\n// Icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconDisc from '@martyrs/src/modules/icons/entities/IconMusic.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\n\n// Store\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst isFavorite = ref(false);\nconst showDropdown = ref(false);\nconst followedArtists = ref([]);\nconst moreAlbums = ref([]);\n\n// Clear state\nalbumsState.currentAlbum = null;\nalbumsState.currentAlbumTracks = [];\n\n// Computed\nconst album = computed(() => albumsState.currentAlbum);\nconst albumTracks = computed(() => albumsState.currentAlbumTracks || []);\n\nconst isOwner = computed(() => {\n  return album.value?.owner?.target === authState.user?._id;\n});\n\nconst totalDuration = computed(() => {\n  if (!albumTracks.value.length) return '0:00';\n  const totalSeconds = albumTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);\n  return formatDuration(totalSeconds);\n});\n\n// Format helpers\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playAlbum = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    playerActions.setQueue(albumTracks.value);\n  }\n};\n\nconst shufflePlay = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    const shuffled = [...albumTracks.value].sort(() => Math.random() - 0.5);\n    playerActions.setQueue(shuffled);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // TODO: Implement actual saving\n};\n\nconst toggleFollowArtist = (artistId) => {\n  const index = followedArtists.value.indexOf(artistId);\n  if (index > -1) {\n    followedArtists.value.splice(index, 1);\n  } else {\n    followedArtists.value.push(artistId);\n  }\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (albumTracks.value.length > 0) {\n    albumTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    showDropdown.value = false;\n  }\n};\n\nconst editAlbum = () => {\n  router.push({ name: 'album-edit', params: { url: album.value.url } });\n};\n\nconst deleteAlbum = async () => {\n  if (confirm('Are you sure you want to delete this album?')) {\n    try {\n      await albumsActions.deleteAlbum(album.value._id);\n      router.push({ name: 'music-library' });\n    } catch (error) {\n      console.error('Failed to delete album:', error);\n    }\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n  showDropdown.value = false;\n};\n\n// Data fetching\nconst fetchAlbumData = async () => {\n  try {\n    await albumsActions.fetchAlbumByUrl(route.params.url);\n    \n    // Fetch more albums from the same artists\n    if (album.value?.artists?.length) {\n      const artistIds = album.value.artists.map(a => a._id);\n      const albums = await albumsActions.fetchAlbums({\n        artist: { $in: artistIds },\n        status: 'published',\n        isPublic: true,\n        limit: 6\n      });\n      \n      // Filter out current album\n      moreAlbums.value = albums.filter(a => a._id !== album.value._id).slice(0, 5);\n    }\n  } catch (error) {\n    console.error('Error fetching album data:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchAlbumData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>\n\n<style scoped>\n</style>"],"names":["albumsState","authState","playerActions","albumsActions"],"mappings":"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"}

package/dist/martyrs/src/modules/music/components/pages/Artist.vue.cjs

@@ -3,20 +3,18 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const vueRouter = require("vue-router");
 const Button = require("../../../../components/Button/Button.vue.cjs");
-const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
+;/* empty css                                         */
+const TrackListCard = require("../cards/TrackListCard.vue.cjs");
 const artists = require("../../store/artists.cjs");
 const auth = require("../../../auth/views/store/auth.cjs");
 const globals = require("../../../globals/views/store/globals.cjs");
 const mixins = require("../../../globals/views/mixins/mixins.cjs");
-const _hoisted_1 = {
-  key: 0,
-  class: "flex-center flex pd-extra"
-};
+const _hoisted_1 = { class: "w-100 pos-relative" };
 const _hoisted_2 = {
-  key: 1,
+  key: 0,
   class: "flex-center flex-column flex pd-extra"
 };
-const _hoisted_3 = { key: 2 };
+const _hoisted_3 = { key: 1 };
 const _hoisted_4 = {
   key: 0,
   class: "pos-absolute pos-t-medium pos-r-medium z-index-1"
@@ -94,29 +92,36 @@ const _hoisted_44 = { class: "p-medium t-truncate" };
 const _hoisted_45 = { class: "p-small t-transp" };
 const _hoisted_46 = {
   key: 2,
+  class: "bg-light pd-medium radius-medium mn-b-medium"
+};
+const _hoisted_47 = { class: "bg-white radius-medium o-hidden" };
+const _hoisted_48 = {
+  key: 3,
   class: "bg-light pd-medium radius-medium t-center"
 };
-const _hoisted_47 = {
+const _hoisted_49 = {
   key: 0,
   class: "mn-t-medium"
 };
-const _hoisted_48 = { class: "cols-5 gap-medium mobile:cols-2" };
-const _hoisted_49 = ["onClick"];
-const _hoisted_50 = { class: "w-100 aspect-1x1 radius-medium o-hidden mn-b-small" };
-const _hoisted_51 = ["src"];
-const _hoisted_52 = {
+const _hoisted_50 = { class: "cols-5 gap-medium mobile:cols-2" };
+const _hoisted_51 = ["onClick"];
+const _hoisted_52 = { class: "w-100 aspect-1x1 radius-medium o-hidden mn-b-small" };
+const _hoisted_53 = ["src"];
+const _hoisted_54 = {
   key: 1,
   class: "w-100 h-100 bg-light flex-center flex"
 };
-const _hoisted_53 = { class: "p-medium t-truncate" };
+const _hoisted_55 = { class: "p-medium t-truncate" };
 const _sfc_main = {
   __name: "Artist",
-  setup(__props) {
+  emits: ["page-loading", "page-loaded"],
+  setup(__props, { emit: __emit }) {
     const { formatDate } = mixins.useGlobalMixins();
     const router = vueRouter.useRouter();
     const route = vueRouter.useRoute();
-    const isLoading = vue.ref(true);
+    const emits = __emit;
     const genres = vue.ref([]);
+    const hasLoaded = vue.ref(false);
     const artist = vue.computed(() => {
       return artists.state.currentArtist;
     });
@@ -126,102 +131,58 @@ const _sfc_main = {
     const relatedArtists = vue.computed(() => {
       return artists.state.relatedArtists;
     });
+    const artistTracks = vue.computed(() => {
+      return artists.state.discography.tracks || [];
+    });
     const isOwner = vue.computed(() => {
       if (!artist.value || !auth.state.user._id) return false;
       return artist.value.creator?.target?._id === auth.state.user._id;
     });
+    artists.state.currentArtist = null;
+    artists.state.discography = {
+      albums: [],
+      singles: [],
+      tracks: []
+    };
+    artists.state.relatedArtists = [];
     const fetchArtist = async () => {
-      isLoading.value = true;
       try {
         const url = route.params.url;
         if (!url) {
           throw new Error("Artist URL is required");
         }
         await artists.actions.fetchArtistByUrl(url);
-        if (artist.value?.genre && artist.value.genre.length > 0) {
-          await fetchGenres();
-        }
       } catch (error) {
         console.error("Error fetching artist:", error);
         globals.actions.setError({
           message: "Failed to load artist"
         });
-      } finally {
-        isLoading.value = false;
       }
     };
-    const fetchGenres = async () => {
-    };
-    const editArtist = () => {
-      router.push({
-        name: "artist-edit",
-        params: { url: artist.value.url }
-      });
-    };
-    const manageContent = () => {
-      router.push({
-        name: "artist-manage-content",
-        params: { artistId: artist.value._id }
-      });
-    };
-    const navigateToAlbum = (album) => {
-      router.push({
-        name: "album",
-        params: { url: album.url }
-      });
-    };
-    const navigateToTrack = (track) => {
-      router.push({
-        name: "track",
-        params: { url: track.url }
-      });
-    };
-    const navigateToArtist = (artist2) => {
-      router.push({
-        name: "artist",
-        params: { url: artist2.url }
-      });
-    };
-    const viewAllAlbums = () => {
-      router.push({
-        name: "artist-albums",
-        params: { artistId: artist.value._id }
-      });
-    };
-    const viewAllSingles = () => {
-      router.push({
-        name: "artist-singles",
-        params: { artistId: artist.value._id }
-      });
-    };
-    const addRelease = () => {
-      router.push({
-        name: "release-create",
-        query: { artistId: artist.value._id }
-      });
-    };
     vue.onMounted(async () => {
+      emits("page-loading");
       await fetchArtist();
+      hasLoaded.value = true;
+      emits("page-loaded");
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", null, [
-        isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-          vue.createVNode(Loader.default)
-        ])) : !artist.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-          _cache[1] || (_cache[1] = vue.createElementVNode("h2", { class: "h2 mn-b-medium" }, "Artist Not Found", -1)),
-          _cache[2] || (_cache[2] = vue.createElementVNode("p", { class: "p-medium t-transp mn-b-medium" }, "The artist you are looking for doesn't exist or may have been removed.", -1)),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        hasLoaded.value && !artist.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          _cache[6] || (_cache[6] = vue.createElementVNode("h2", { class: "h2 mn-b-medium" }, "Artist Not Found", -1)),
+          _cache[7] || (_cache[7] = vue.createElementVNode("p", { class: "p-medium t-transp mn-b-medium" }, "The artist you are looking for doesn't exist or may have been removed.", -1)),
           vue.createVNode(Button.default, {
             submit: () => vue.unref(router).push({ name: "music-home" }),
             class: "bg-main",
             showSucces: false,
             showLoader: false
           }, {
-            default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+            default: vue.withCtx(() => _cache[5] || (_cache[5] = [
               vue.createTextVNode(" Back to Music ")
             ])),
             _: 1
           }, 8, ["submit"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+        ])) : vue.createCommentVNode("", true),
+        artist.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
           vue.createElementVNode("div", {
             class: "w-100 t-white h-50vh pos-relative",
             style: vue.normalizeStyle(artist.value.coverUrl ? `background-image: url(${_ctx.FILE_SERVER_URL + artist.value.coverUrl}); background-size: cover; background-position: center;` : "")
@@ -231,23 +192,23 @@ const _sfc_main = {
             }, null, 2),
             isOwner.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
               vue.createVNode(Button.default, {
-                submit: editArtist,
+                onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(router).push({ name: "artist-edit", params: { url: artist.value.url } })),
                 class: "bg-main mn-r-small",
                 showSucces: false,
                 showLoader: false
               }, {
-                default: vue.withCtx(() => _cache[3] || (_cache[3] = [
+                default: vue.withCtx(() => _cache[8] || (_cache[8] = [
                   vue.createTextVNode(" Edit Artist ")
                 ])),
                 _: 1
               }),
               vue.createVNode(Button.default, {
-                submit: manageContent,
+                onClick: _cache[1] || (_cache[1] = ($event) => vue.unref(router).push({ name: "artist-manage-content", params: { artistId: artist.value._id } })),
                 class: "bg-white t-black",
                 showSucces: false,
                 showLoader: false
               }, {
-                default: vue.withCtx(() => _cache[4] || (_cache[4] = [
+                default: vue.withCtx(() => _cache[9] || (_cache[9] = [
                   vue.createTextVNode(" Manage Content ")
                 ])),
                 _: 1
@@ -261,7 +222,7 @@ const _sfc_main = {
                   alt: "Artist photo",
                   class: "w-100 h-100 object-fit-cover"
                 }, null, 8, _hoisted_7)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-                  vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(artist.value.name[0]), 1)
+                  vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(artist.value?.name?.[0] || "A"), 1)
                 ]))
               ]),
               vue.createElementVNode("div", _hoisted_10, [
@@ -276,7 +237,7 @@ const _sfc_main = {
                     href: `https://t.me/${artist.value.socials.telegram}`,
                     target: "_blank",
                     class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
-                  }, _cache[5] || (_cache[5] = [
+                  }, _cache[10] || (_cache[10] = [
                     vue.createElementVNode("span", null, "T", -1)
                   ]), 8, _hoisted_16)) : vue.createCommentVNode("", true),
                   artist.value.socials.twitter ? (vue.openBlock(), vue.createElementBlock("a", {
@@ -284,7 +245,7 @@ const _sfc_main = {
                     href: `https://twitter.com/${artist.value.socials.twitter}`,
                     target: "_blank",
                     class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
-                  }, _cache[6] || (_cache[6] = [
+                  }, _cache[11] || (_cache[11] = [
                     vue.createElementVNode("span", null, "𝕏", -1)
                   ]), 8, _hoisted_17)) : vue.createCommentVNode("", true),
                   artist.value.socials.instagram ? (vue.openBlock(), vue.createElementBlock("a", {
@@ -292,7 +253,7 @@ const _sfc_main = {
                     href: `https://instagram.com/${artist.value.socials.instagram}`,
                     target: "_blank",
                     class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
-                  }, _cache[7] || (_cache[7] = [
+                  }, _cache[12] || (_cache[12] = [
                     vue.createElementVNode("span", null, "I", -1)
                   ]), 8, _hoisted_18)) : vue.createCommentVNode("", true),
                   artist.value.socials.facebook ? (vue.openBlock(), vue.createElementBlock("a", {
@@ -300,7 +261,7 @@ const _sfc_main = {
                     href: `https://facebook.com/${artist.value.socials.facebook}`,
                     target: "_blank",
                     class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
-                  }, _cache[8] || (_cache[8] = [
+                  }, _cache[13] || (_cache[13] = [
                     vue.createElementVNode("span", null, "F", -1)
                   ]), 8, _hoisted_19)) : vue.createCommentVNode("", true),
                   artist.value.website ? (vue.openBlock(), vue.createElementBlock("a", {
@@ -308,7 +269,7 @@ const _sfc_main = {
                     href: artist.value.website,
                     target: "_blank",
                     class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
-                  }, _cache[9] || (_cache[9] = [
+                  }, _cache[14] || (_cache[14] = [
                     vue.createElementVNode("span", null, "W", -1)
                   ]), 8, _hoisted_20)) : vue.createCommentVNode("", true)
                 ])
@@ -319,11 +280,11 @@ const _sfc_main = {
             vue.createElementVNode("div", _hoisted_22, [
               vue.createElementVNode("div", null, [
                 vue.createElementVNode("div", _hoisted_23, [
-                  _cache[10] || (_cache[10] = vue.createElementVNode("h2", { class: "h3 mn-b-small" }, "Biography", -1)),
+                  _cache[15] || (_cache[15] = vue.createElementVNode("h2", { class: "h3 mn-b-small" }, "Biography", -1)),
                   artist.value.bio ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_24, vue.toDisplayString(artist.value.bio), 1)) : (vue.openBlock(), vue.createElementBlock("p", _hoisted_25, "No biography available for this artist."))
                 ]),
                 genres.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
-                  _cache[11] || (_cache[11] = vue.createElementVNode("h2", { class: "h3 mn-b-small" }, "Genres", -1)),
+                  _cache[16] || (_cache[16] = vue.createElementVNode("h2", { class: "h3 mn-b-small" }, "Genres", -1)),
                   vue.createElementVNode("div", _hoisted_27, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(genres.value, (genre) => {
                       return vue.openBlock(), vue.createElementBlock("span", {
@@ -336,13 +297,13 @@ const _sfc_main = {
               ]),
               vue.createElementVNode("div", null, [
                 discography.value.albums.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, [
-                  _cache[14] || (_cache[14] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Albums", -1)),
+                  _cache[19] || (_cache[19] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Albums", -1)),
                   vue.createElementVNode("div", _hoisted_29, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(discography.value.albums, (album) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
                         key: album._id,
                         class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white",
-                        onClick: ($event) => navigateToAlbum(album)
+                        onClick: ($event) => vue.unref(router).push({ name: "album", params: { url: album.url } })
                       }, [
                         vue.createElementVNode("div", _hoisted_31, [
                           album.coverUrl ? (vue.openBlock(), vue.createElementBlock("img", {
@@ -350,7 +311,7 @@ const _sfc_main = {
                             src: _ctx.FILE_SERVER_URL + album.coverUrl,
                             alt: "Album cover",
                             class: "w-100 h-100 object-fit-cover"
-                          }, null, 8, _hoisted_32)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_33, _cache[12] || (_cache[12] = [
+                          }, null, 8, _hoisted_32)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_33, _cache[17] || (_cache[17] = [
                             vue.createElementVNode("span", null, "A", -1)
                           ])))
                         ]),
@@ -363,25 +324,25 @@ const _sfc_main = {
                   ]),
                   discography.value.albums.length > 4 ? (vue.openBlock(), vue.createBlock(Button.default, {
                     key: 0,
-                    submit: viewAllAlbums,
+                    onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(router).push({ name: "artist-albums", params: { artistId: artist.value._id } })),
                     class: "mn-t-small w-100 bg-white t-black",
                     showSucces: false,
                     showLoader: false
                   }, {
-                    default: vue.withCtx(() => _cache[13] || (_cache[13] = [
+                    default: vue.withCtx(() => _cache[18] || (_cache[18] = [
                       vue.createTextVNode(" View All Albums ")
                     ])),
                     _: 1
                   })) : vue.createCommentVNode("", true)
                 ])) : vue.createCommentVNode("", true),
                 discography.value.singles.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_37, [
-                  _cache[17] || (_cache[17] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Singles & EPs", -1)),
+                  _cache[22] || (_cache[22] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Singles & EPs", -1)),
                   vue.createElementVNode("div", _hoisted_38, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(discography.value.singles, (single) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
                         key: single._id,
                         class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white",
-                        onClick: ($event) => navigateToTrack(single)
+                        onClick: ($event) => vue.unref(router).push({ name: "track", params: { url: single.url } })
                       }, [
                         vue.createElementVNode("div", _hoisted_40, [
                           single.coverUrl ? (vue.openBlock(), vue.createElementBlock("img", {
@@ -389,7 +350,7 @@ const _sfc_main = {
                             src: _ctx.FILE_SERVER_URL + single.coverUrl,
                             alt: "Single cover",
                             class: "w-100 h-100 object-fit-cover"
-                          }, null, 8, _hoisted_41)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_42, _cache[15] || (_cache[15] = [
+                          }, null, 8, _hoisted_41)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_42, _cache[20] || (_cache[20] = [
                             vue.createElementVNode("span", null, "S", -1)
                           ])))
                         ]),
@@ -402,28 +363,42 @@ const _sfc_main = {
                   ]),
                   discography.value.singles.length > 5 ? (vue.openBlock(), vue.createBlock(Button.default, {
                     key: 0,
-                    submit: viewAllSingles,
+                    onClick: _cache[3] || (_cache[3] = ($event) => vue.unref(router).push({ name: "artist-singles", params: { artistId: artist.value._id } })),
                     class: "mn-t-small w-100 bg-white t-black",
                     showSucces: false,
                     showLoader: false
                   }, {
-                    default: vue.withCtx(() => _cache[16] || (_cache[16] = [
+                    default: vue.withCtx(() => _cache[21] || (_cache[21] = [
                       vue.createTextVNode(" View All Singles & EPs ")
                     ])),
                     _: 1
                   })) : vue.createCommentVNode("", true)
                 ])) : vue.createCommentVNode("", true),
-                discography.value.albums.length === 0 && discography.value.singles.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_46, [
-                  _cache[19] || (_cache[19] = vue.createElementVNode("p", { class: "p-medium mn-b-small" }, "No releases yet", -1)),
-                  _cache[20] || (_cache[20] = vue.createElementVNode("p", { class: "p-small t-transp" }, "This artist hasn't released any albums or singles yet.", -1)),
+                artistTracks.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_46, [
+                  _cache[23] || (_cache[23] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Popular Tracks", -1)),
+                  vue.createElementVNode("div", _hoisted_47, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(artistTracks.value, (track, index) => {
+                      return vue.openBlock(), vue.createBlock(TrackListCard.default, {
+                        key: track._id,
+                        track,
+                        index,
+                        showAlbum: true,
+                        showCover: true
+                      }, null, 8, ["track", "index"]);
+                    }), 128))
+                  ])
+                ])) : vue.createCommentVNode("", true),
+                discography.value.albums.length === 0 && discography.value.singles.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, [
+                  _cache[25] || (_cache[25] = vue.createElementVNode("p", { class: "p-medium mn-b-small" }, "No releases yet", -1)),
+                  _cache[26] || (_cache[26] = vue.createElementVNode("p", { class: "p-small t-transp" }, "This artist hasn't released any albums or singles yet.", -1)),
                   isOwner.value ? (vue.openBlock(), vue.createBlock(Button.default, {
                     key: 0,
-                    submit: addRelease,
+                    onClick: _cache[4] || (_cache[4] = ($event) => vue.unref(router).push({ name: "release-create", query: { artistId: artist.value._id } })),
                     class: "mn-t-medium bg-main",
                     showSucces: false,
                     showLoader: false
                   }, {
-                    default: vue.withCtx(() => _cache[18] || (_cache[18] = [
+                    default: vue.withCtx(() => _cache[24] || (_cache[24] = [
                       vue.createTextVNode(" Add Release ")
                     ])),
                     _: 1
@@ -431,32 +406,32 @@ const _sfc_main = {
                 ])) : vue.createCommentVNode("", true)
               ])
             ]),
-            relatedArtists.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_47, [
-              _cache[21] || (_cache[21] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Fans Also Like", -1)),
-              vue.createElementVNode("div", _hoisted_48, [
+            relatedArtists.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_49, [
+              _cache[27] || (_cache[27] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Fans Also Like", -1)),
+              vue.createElementVNode("div", _hoisted_50, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(relatedArtists.value, (relatedArtist) => {
                   return vue.openBlock(), vue.createElementBlock("div", {
                     key: relatedArtist._id,
                     class: "t-center cursor-pointer",
-                    onClick: ($event) => navigateToArtist(relatedArtist)
+                    onClick: ($event) => vue.unref(router).push({ name: "artist", params: { url: relatedArtist.url } })
                   }, [
-                    vue.createElementVNode("div", _hoisted_50, [
+                    vue.createElementVNode("div", _hoisted_52, [
                       relatedArtist.photoUrl ? (vue.openBlock(), vue.createElementBlock("img", {
                         key: 0,
                         src: _ctx.FILE_SERVER_URL + relatedArtist.photoUrl,
                         alt: "Artist photo",
                         class: "w-100 h-100 object-fit-cover"
-                      }, null, 8, _hoisted_51)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_52, [
-                        vue.createElementVNode("span", null, vue.toDisplayString(relatedArtist.name[0]), 1)
+                      }, null, 8, _hoisted_53)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_54, [
+                        vue.createElementVNode("span", null, vue.toDisplayString(relatedArtist?.name?.[0] || "A"), 1)
                       ]))
                     ]),
-                    vue.createElementVNode("p", _hoisted_53, vue.toDisplayString(relatedArtist.name), 1)
-                  ], 8, _hoisted_49);
+                    vue.createElementVNode("p", _hoisted_55, vue.toDisplayString(relatedArtist.name), 1)
+                  ], 8, _hoisted_51);
                 }), 128))
               ])
             ])) : vue.createCommentVNode("", true)
           ])
-        ]))
+        ])) : vue.createCommentVNode("", true)
       ]);
     };
   }