npm - @ozdao/martyrs - Versions diffs - 0.2.546 → 0.2.548 - Mend

@ozdao/martyrs 0.2.546 → 0.2.548

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (763) hide show

package/dist/martyrs/src/modules/music/components/pages/Album.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Album.vue.cjs","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 <Media \n :url=\"album.coverArt \|\| '/logo/logo-placeholder.jpg'\"\n :alt=\"album.title\"\n class=\"aspect-1x1 w-100 w-max-30r mn-b-small radius-medium o-hidden\"\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=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n {{ album.type }}\n </span>\n <span v-if=\"album.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\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 t-white bg-black radius-thin flex-center gap-thin\"\n >\n <IconPlay fill=\"rgb(var(--white))\" class=\"i-medium\" />\n Play All\n </Button>\n\n <Button\n @click=\"shufflePlay\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconShuffle class=\"i-medium\" />\n Shuffle\n </Button>\n\n <Button\n @click=\"toggleFavorite\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'\" />\n {{isFavorite ? 'Liked' : 'Like'}}\n </Button>\n\n <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" 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-white 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 <Button @click=\"addToPlaylist\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Add to Playlist\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-medium\">\n <h3 class=\"t-medium mn-b-small\" v-if=\"album.artists\">Artists</h3>\n <div class=\"flex flex-column gap-small\">\n <ArtistCardSmall \n v-for=\"artist in album.artists\" \n :key=\"artist._id\"\n :artist=\"artist\"\n :is-following=\"followedArtists.includes(artist._id)\"\n :show-follow-button=\"!isOwner\"\n @toggle-follow=\"toggleFollowArtist\"\n />\n </div>\n </div>\n\n <!-- Metadata Cards -->\n <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n <!-- Release Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <IconCalendar class=\"i-regular t-primary\" />\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 <IconClock class=\"i-regular t-primary\" />\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 <IconDisc class=\"i-regular t-primary\" />\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 <IconEye class=\"i-regular t-primary\" />\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-main t-medium pd-thin radius-thin t-small 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 </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=\"{ name: 'artist', params: { url: 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';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.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":["useRoute","useRouter","ref","albumsState","computed","authState","playerActions","albumsActions","albums","onMounted"],"mappings":"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"}
1	+ {"version":3,"file":"Album.vue.cjs","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 <Media \n :url=\"album.coverArt \|\| '/logo/logo-placeholder.jpg'\"\n :alt=\"album.title\"\n class=\"aspect-1x1 w-100 w-max-30r mn-b-small radius-medium o-hidden\"\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=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n {{ album.type }}\n </span>\n <span v-if=\"album.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\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 t-white bg-black radius-thin flex-center gap-thin\"\n >\n <IconPlay fill=\"rgb(var(--white))\" class=\"i-medium\" />\n Play All\n </Button>\n\n <Button\n @click=\"shufflePlay\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconShuffle class=\"i-medium\" />\n Shuffle\n </Button>\n\n <Button\n @click=\"toggleFavorite\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'\" />\n {{isFavorite ? 'Liked' : 'Like'}}\n </Button>\n\n <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" 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-white 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 <Button @click=\"addToPlaylist\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Add to Playlist\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-medium\">\n <h3 class=\"t-medium mn-b-small\" v-if=\"album.artists\">Artists</h3>\n <div class=\"flex flex-column gap-small\">\n <ArtistCardSmall \n v-for=\"artist in album.artists\" \n :key=\"artist._id\"\n :artist=\"artist\"\n :is-following=\"followedArtists.includes(artist._id)\"\n :show-follow-button=\"!isOwner\"\n @toggle-follow=\"toggleFollowArtist\"\n />\n </div>\n </div>\n\n <!-- Metadata Cards -->\n <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n <!-- Release Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n <IconCalendar class=\"i-medium t-primary\" />\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-regular\">\n <IconClock class=\"i-medium t-primary\" />\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-regular\">\n <IconDisc class=\"i-medium t-primary\" />\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-regular\">\n <IconEye class=\"i-medium t-primary\" />\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-main t-medium pd-thin radius-thin t-small 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 </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=\"{ name: 'artist', params: { url: 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';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.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":["useRoute","useRouter","ref","albumsState","computed","authState","playerActions","albumsActions","albums","onMounted"],"mappings":"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"}

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

@@ -55,16 +55,16 @@ const _hoisted_19 = {
 };
 const _hoisted_20 = { class: "flex flex-column gap-small" };
 const _hoisted_21 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
-const _hoisted_22 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_22 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_23 = { class: "t-medium" };
-const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_25 = { class: "t-medium" };
 const _hoisted_26 = {
   key: 0,
-  class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium"
+  class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular"
 };
 const _hoisted_27 = { class: "t-medium" };
-const _hoisted_28 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_28 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_29 = { class: "t-medium" };
 const _hoisted_30 = {
   key: 0,
@@ -380,28 +380,28 @@ const _sfc_main = {
             _cache[17] || (_cache[17] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
             createElementVNode("div", _hoisted_21, [
               createElementVNode("div", _hoisted_22, [
-                createVNode(_sfc_main$7, { class: "i-regular t-primary" }),
+                createVNode(_sfc_main$7, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
                   _cache[12] || (_cache[12] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
                   createElementVNode("div", _hoisted_23, toDisplayString(formatDate(album.value.releaseDate)), 1)
                 ])
               ]),
               createElementVNode("div", _hoisted_24, [
-                createVNode(IconTime, { class: "i-regular t-primary" }),
+                createVNode(IconTime, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
                   _cache[13] || (_cache[13] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
                   createElementVNode("div", _hoisted_25, toDisplayString(totalDuration.value), 1)
                 ])
               ]),
               album.value.label ? (openBlock(), createElementBlock("div", _hoisted_26, [
-                createVNode(_sfc_main$8, { class: "i-regular t-primary" }),
+                createVNode(_sfc_main$8, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
                   _cache[14] || (_cache[14] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Label", -1)),
                   createElementVNode("div", _hoisted_27, toDisplayString(album.value.label), 1)
                 ])
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_28, [
-                createVNode(_sfc_main$9, { class: "i-regular t-primary" }),
+                createVNode(_sfc_main$9, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
                   _cache[15] || (_cache[15] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
                   createElementVNode("div", _hoisted_29, toDisplayString(album.value.isPublic ? "Public" : "Private"), 1)

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

	@@ -1 +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 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 <Media \n :url=\"album.coverArt \|\| '/logo/logo-placeholder.jpg'\"\n :alt=\"album.title\"\n class=\"aspect-1x1 w-100 w-max-30r mn-b-small radius-medium o-hidden\"\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=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n {{ album.type }}\n </span>\n <span v-if=\"album.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\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 t-white bg-black radius-thin flex-center gap-thin\"\n >\n <IconPlay fill=\"rgb(var(--white))\" class=\"i-medium\" />\n Play All\n </Button>\n\n <Button\n @click=\"shufflePlay\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconShuffle class=\"i-medium\" />\n Shuffle\n </Button>\n\n <Button\n @click=\"toggleFavorite\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'\" />\n {{isFavorite ? 'Liked' : 'Like'}}\n </Button>\n\n <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" 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-white 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 <Button @click=\"addToPlaylist\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Add to Playlist\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-medium\">\n <h3 class=\"t-medium mn-b-small\" v-if=\"album.artists\">Artists</h3>\n <div class=\"flex flex-column gap-small\">\n <ArtistCardSmall \n v-for=\"artist in album.artists\" \n :key=\"artist._id\"\n :artist=\"artist\"\n :is-following=\"followedArtists.includes(artist._id)\"\n :show-follow-button=\"!isOwner\"\n @toggle-follow=\"toggleFollowArtist\"\n />\n </div>\n </div>\n\n <!-- Metadata Cards -->\n <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n <!-- Release Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <IconCalendar class=\"i-regular t-primary\" />\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 <IconClock class=\"i-regular t-primary\" />\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 <IconDisc class=\"i-regular t-primary\" />\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 <IconEye class=\"i-regular t-primary\" />\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-main t-medium pd-thin radius-thin t-small 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 </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=\"{ name: 'artist', params: { url: 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';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.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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"}
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 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 <Media \n :url=\"album.coverArt \|\| '/logo/logo-placeholder.jpg'\"\n :alt=\"album.title\"\n class=\"aspect-1x1 w-100 w-max-30r mn-b-small radius-medium o-hidden\"\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=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n {{ album.type }}\n </span>\n <span v-if=\"album.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\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 t-white bg-black radius-thin flex-center gap-thin\"\n >\n <IconPlay fill=\"rgb(var(--white))\" class=\"i-medium\" />\n Play All\n </Button>\n\n <Button\n @click=\"shufflePlay\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconShuffle class=\"i-medium\" />\n Shuffle\n </Button>\n\n <Button\n @click=\"toggleFavorite\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'\" />\n {{isFavorite ? 'Liked' : 'Like'}}\n </Button>\n\n <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" 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-white 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 <Button @click=\"addToPlaylist\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Add to Playlist\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-medium\">\n <h3 class=\"t-medium mn-b-small\" v-if=\"album.artists\">Artists</h3>\n <div class=\"flex flex-column gap-small\">\n <ArtistCardSmall \n v-for=\"artist in album.artists\" \n :key=\"artist._id\"\n :artist=\"artist\"\n :is-following=\"followedArtists.includes(artist._id)\"\n :show-follow-button=\"!isOwner\"\n @toggle-follow=\"toggleFollowArtist\"\n />\n </div>\n </div>\n\n <!-- Metadata Cards -->\n <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n <!-- Release Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n <IconCalendar class=\"i-medium t-primary\" />\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-regular\">\n <IconClock class=\"i-medium t-primary\" />\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-regular\">\n <IconDisc class=\"i-medium t-primary\" />\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-regular\">\n <IconEye class=\"i-medium t-primary\" />\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-main t-medium pd-thin radius-thin t-small 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 </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=\"{ name: 'artist', params: { url: 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';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.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 CHANGED Viewed

@@ -36,7 +36,7 @@ const _hoisted_13 = {
 };
 const _hoisted_14 = {
   key: 0,
-  class: "p-medium mn-b-small"
+  class: "p-regular mn-b-small"
 };
 const _hoisted_15 = { class: "flex flex-nowrap gap-small mobile:flex-center" };
 const _hoisted_16 = ["href"];
@@ -45,15 +45,15 @@ const _hoisted_18 = ["href"];
 const _hoisted_19 = ["href"];
 const _hoisted_20 = ["href"];
 const _hoisted_21 = { class: "pd-medium" };
-const _hoisted_22 = { class: "cols-2-1_2 gap-medium mobile:cols-1" };
+const _hoisted_22 = { class: "cols-2-1_2 gap-regular mobile:cols-1" };
 const _hoisted_23 = { class: "bg-light pd-medium radius-medium mn-b-medium" };
 const _hoisted_24 = {
   key: 0,
-  class: "p-medium"
+  class: "p-regular"
 };
 const _hoisted_25 = {
   key: 1,
-  class: "p-medium t-transp"
+  class: "p-regular t-transp"
 };
 const _hoisted_26 = {
   key: 0,
@@ -73,7 +73,7 @@ const _hoisted_33 = {
   class: "w-100 h-100 bg-light flex-center flex"
 };
 const _hoisted_34 = { class: "w-100 o-hidden" };
-const _hoisted_35 = { class: "p-medium t-truncate" };
+const _hoisted_35 = { class: "p-regular t-truncate" };
 const _hoisted_36 = { class: "p-small t-transp" };
 const _hoisted_37 = {
   key: 1,
@@ -88,7 +88,7 @@ const _hoisted_42 = {
   class: "w-100 h-100 bg-light flex-center flex"
 };
 const _hoisted_43 = { class: "w-100 o-hidden" };
-const _hoisted_44 = { class: "p-medium t-truncate" };
+const _hoisted_44 = { class: "p-regular t-truncate" };
 const _hoisted_45 = { class: "p-small t-transp" };
 const _hoisted_46 = {
   key: 2,
@@ -103,7 +103,7 @@ const _hoisted_49 = {
   key: 0,
   class: "mn-t-medium"
 };
-const _hoisted_50 = { class: "cols-5 gap-medium mobile:cols-2" };
+const _hoisted_50 = { class: "cols-5 gap-regular 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"];
@@ -111,7 +111,7 @@ const _hoisted_54 = {
   key: 1,
   class: "w-100 h-100 bg-light flex-center flex"
 };
-const _hoisted_55 = { class: "p-medium t-truncate" };
+const _hoisted_55 = { class: "p-regular t-truncate" };
 const _sfc_main = {
   __name: "Artist",
   emits: ["page-loading", "page-loaded"],
@@ -169,7 +169,7 @@ const _sfc_main = {
       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)),
+          _cache[7] || (_cache[7] = vue.createElementVNode("p", { class: "p-regular 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",
@@ -389,7 +389,7 @@ const _sfc_main = {
                   ])
                 ])) : 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[25] || (_cache[25] = vue.createElementVNode("p", { class: "p-regular 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,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Artist.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Artist.vue"],"sourcesContent":["<template>\n <div class=\"w-100 pos-relative\">\n \n <!-- Artist not found -->\n <div v-if=\"hasLoaded && !artist\" class=\"flex-center flex-column flex pd-extra\">\n <h2 class=\"h2 mn-b-medium\">Artist Not Found</h2>\n <p class=\"p-medium t-transp mn-b-medium\">The artist you are looking for doesn't exist or may have been removed.</p>\n <Button\n :submit=\"() => router.push({ name: 'music-home' })\"\n class=\"bg-main \"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n Back to Music\n </Button>\n </div>\n \n <!-- Artist content -->\n <div v-if=\"artist\">\n <!-- Cover image -->\n <div \n class=\"w-100 t-white h-50vh pos-relative\"\n :style=\"artist.coverUrl ? `background-image: url(${FILE_SERVER_URL + artist.coverUrl}); background-size: cover; background-position: center;` : ''\"\n >\n <div class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small\" :class=\"artist.coverUrl ? 'bg-black-transp-50' : 'bg-dark'\"></div>\n \n <!-- Artist actions for edit/manage -->\n <div v-if=\"isOwner\" class=\"pos-absolute pos-t-medium pos-r-medium z-index-1\">\n <Button\n @click=\"router.push({ name: 'artist-edit', params: { url: artist.url } })\"\n class=\"bg-main mn-r-small\"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n Edit Artist\n </Button>\n \n <Button\n @click=\"router.push({ name: 'artist-manage-content', params: { artistId: artist._id } })\"\n class=\"bg-white t-black\"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n Manage Content\n </Button>\n </div>\n \n <!-- Artist profile info -->\n <div class=\"flex-v-center t-white pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center\">\n <div class=\"w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium\">\n <img\n v-if=\"artist.photoUrl\"\n :src=\"FILE_SERVER_URL + (artist.photoUrl \|\| '/logo/logo-placeholder.jpg')\"\n alt=\"Artist photo\"\n class=\"w-100 h-100 object-fit-cover\"\n />\n <div v-else class=\"w-100 h-100 bg-black flex-center flex\">\n <span class=\"h1 t-white\">{{ artist?.name?.[0] \|\| 'A' }}</span>\n </div>\n </div>\n \n <div class=\" mobile:t-center\">\n <div class=\"flex-v-center flex-nowrap flex mn-b-small mobile:flex-center\">\n <h1 class=\"h1 mn-r-small\">{{ artist.name }}</h1>\n <span v-if=\"artist.isVerified\" class=\"bg-main-nano pd-micro radius-small\">\n ✓ Verified\n </span>\n </div>\n \n <p v-if=\"artist.location\" class=\"p-medium mn-b-small\">{{ artist.location }}</p>\n \n <!-- Social media links -->\n <div class=\"flex flex-nowrap gap-small mobile:flex-center\">\n <a \n v-if=\"artist.socials.telegram\" \n :href=\"`https://t.me/${artist.socials.telegram}`\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>T</span>\n </a>\n \n <a \n v-if=\"artist.socials.twitter\" \n :href=\"`https://twitter.com/${artist.socials.twitter}`\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>𝕏</span>\n </a>\n \n <a \n v-if=\"artist.socials.instagram\" \n :href=\"`https://instagram.com/${artist.socials.instagram}`\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>I</span>\n </a>\n \n <a \n v-if=\"artist.socials.facebook\" \n :href=\"`https://facebook.com/${artist.socials.facebook}`\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>F</span>\n </a>\n \n <a \n v-if=\"artist.website\" \n :href=\"artist.website\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>W</span>\n </a>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Main content -->\n <div class=\"pd-medium\">\n <div class=\"cols-2-1_2 gap-medium mobile:cols-1\">\n <!-- Left column - Bio and details -->\n <div>\n <div class=\"bg-light pd-medium radius-medium mn-b-medium\">\n <h2 class=\"h3 mn-b-small\">Biography</h2>\n <p v-if=\"artist.bio\" class=\"p-medium\">{{ artist.bio }}</p>\n <p v-else class=\"p-medium t-transp\">No biography available for this artist.</p>\n </div>\n \n <!-- Genres -->\n <div v-if=\"genres.length > 0\" class=\"bg-light pd-medium radius-medium\">\n <h2 class=\"h3 mn-b-small\">Genres</h2>\n <div class=\"flex flex-wrap gap-small\">\n <span \n v-for=\"genre in genres\" \n :key=\"genre._id\"\n class=\"bg-white pd-thin radius-medium\"\n >\n {{ genre.name }}\n </span>\n </div>\n </div>\n </div>\n \n <!-- Right column - Discography -->\n <div>\n <!-- Albums section -->\n <div v-if=\"discography.albums.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n <h2 class=\"h3 mn-b-medium\">Albums</h2>\n \n <div class=\"cols-2 gap-small mobile:cols-1\">\n <div\n v-for=\"album in discography.albums\"\n :key=\"album._id\"\n class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n @click=\"router.push({ name: 'album', params: { url: album.url } })\"\n >\n <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n <img\n v-if=\"album.coverUrl\"\n :src=\"FILE_SERVER_URL + album.coverUrl\"\n alt=\"Album cover\"\n class=\"w-100 h-100 object-fit-cover\"\n />\n <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n <span>A</span>\n </div>\n </div>\n \n <div class=\"w-100 o-hidden\">\n <p class=\"p-medium t-truncate\">{{ album.title }}</p>\n <p class=\"p-small t-transp\">{{ formatDate(album.releaseDate) }}</p>\n </div>\n </div>\n </div>\n \n <Button\n v-if=\"discography.albums.length > 4\"\n @click=\"router.push({ name: 'artist-albums', params: { artistId: artist._id } })\"\n class=\"mn-t-small w-100 bg-white t-black\"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n View All Albums\n </Button>\n </div>\n \n <!-- Singles section -->\n <div v-if=\"discography.singles.length > 0\" class=\"bg-light pd-medium mn-b-medium radius-medium\">\n <h2 class=\"h3 mn-b-medium\">Singles & EPs</h2>\n \n <div class=\"cols-1 gap-small\">\n <div\n v-for=\"single in discography.singles\"\n :key=\"single._id\"\n class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n @click=\"router.push({ name: 'track', params: { url: single.url } })\"\n >\n <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n <img\n v-if=\"single.coverUrl\"\n :src=\"FILE_SERVER_URL + single.coverUrl\"\n alt=\"Single cover\"\n class=\"w-100 h-100 object-fit-cover\"\n />\n <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n <span>S</span>\n </div>\n </div>\n \n <div class=\"w-100 o-hidden\">\n <p class=\"p-medium t-truncate\">{{ single.title }}</p>\n <p class=\"p-small t-transp\">{{ formatDate(single.releaseDate) }}</p>\n </div>\n </div>\n </div>\n \n <Button\n v-if=\"discography.singles.length > 5\"\n @click=\"router.push({ name: 'artist-singles', params: { artistId: artist._id } })\"\n class=\"mn-t-small w-100 bg-white t-black\"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n View All Singles & EPs\n </Button>\n </div>\n \n <!-- Popular Tracks Section -->\n <div v-if=\"artistTracks.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n <h2 class=\"h3 mn-b-medium\">Popular Tracks</h2>\n \n <div class=\"bg-white radius-medium o-hidden\">\n <TrackListCard\n v-for=\"(track, index) in artistTracks\"\n :key=\"track._id\"\n :track=\"track\"\n :index=\"index\"\n :showAlbum=\"true\"\n :showCover=\"true\"\n />\n </div>\n </div>\n \n <!-- No discography yet -->\n <div \n v-if=\"discography.albums.length === 0 && discography.singles.length === 0\" \n class=\"bg-light pd-medium radius-medium t-center\"\n >\n <p class=\"p-medium mn-b-small\">No releases yet</p>\n <p class=\"p-small t-transp\">This artist hasn't released any albums or singles yet.</p>\n \n <Button\n v-if=\"isOwner\"\n @click=\"router.push({ name: 'release-create', query: { artistId: artist._id } })\"\n class=\"mn-t-medium bg-main \"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n Add Release\n </Button>\n </div>\n </div>\n </div>\n \n <!-- Related Artists -->\n <div v-if=\"relatedArtists.length > 0\" class=\"mn-t-medium\">\n <h2 class=\"h3 mn-b-medium\">Fans Also Like</h2>\n \n <div class=\"cols-5 gap-medium mobile:cols-2\">\n <div\n v-for=\"relatedArtist in relatedArtists\"\n :key=\"relatedArtist._id\"\n class=\"t-center cursor-pointer\"\n @click=\"router.push({ name: 'artist', params: { url: relatedArtist.url } })\"\n >\n <div class=\"w-100 aspect-1x1 radius-medium o-hidden mn-b-small\">\n <img\n v-if=\"relatedArtist.photoUrl\"\n :src=\"FILE_SERVER_URL + relatedArtist.photoUrl\"\n alt=\"Artist photo\"\n class=\"w-100 h-100 object-fit-cover\"\n />\n <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n <span>{{ relatedArtist?.name?.[0] \|\| 'A' }}</span>\n </div>\n </div>\n \n <p class=\"p-medium t-truncate\">{{ relatedArtist.name }}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\n// import * as genreStore from '../../store/genres'; // Assuming you have a genre store\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\n// Import mixins\nimport { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\nconst { formatDate } = useGlobalMixins();\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst genres = ref([]);\nconst hasLoaded = ref(false);\n\n// Computed\nconst artist = computed(() => {\n return artistsStore.state.currentArtist;\n});\n\nconst discography = computed(() => {\n return artistsStore.state.discography;\n});\n\nconst relatedArtists = computed(() => {\n return artistsStore.state.relatedArtists;\n});\n\nconst artistTracks = computed(() => {\n return artistsStore.state.discography.tracks \|\| [];\n});\n\nconst isOwner = computed(() => {\n if (!artist.value \|\| !auth.state.user._id) return false;\n \n // Check if current user is the creator of the artist\n return artist.value.creator?.target?._id === auth.state.user._id;\n});\n\n// Clear current artist state\nartistsStore.state.currentArtist = null;\n// Clear discography state\nartistsStore.state.discography = {\n albums: [],\n singles: [],\n tracks: []\n};\nartistsStore.state.relatedArtists = [];\n\n// Methods\nconst fetchArtist = async () => {\n try {\n // Get URL from route params\n const url = route.params.url;\n if (!url) {\n throw new Error('Artist URL is required');\n }\n \n await artistsStore.actions.fetchArtistByUrl(url);\n } catch (error) {\n console.error('Error fetching artist:', error);\n globals.actions.setError({\n message: 'Failed to load artist'\n });\n }\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n emits('page-loading');\n \n await fetchArtist();\n \n hasLoaded.value = true;\n emits('page-loaded');\n});\n</script>"],"names":["useGlobalMixins","useRouter","useRoute","ref","computed","artistsStore.state","auth.state","artistsStore.actions","globals.actions","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8TA,UAAM,EAAE,WAAU,IAAKA,uBAAe;AAGtC,UAAM,SAASC,UAAAA,UAAS;AACxB,UAAM,QAAQC,UAAAA,SAAQ;AAGtB,UAAM,QAAQ;AAGd,UAAM,SAASC,IAAAA,IAAI,EAAE;AACrB,UAAM,YAAYA,IAAAA,IAAI,KAAK;AAG3B,UAAM,SAASC,IAAAA,SAAS,MAAM;AAC5B,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,cAAcD,IAAAA,SAAS,MAAM;AACjC,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,iBAAiBD,IAAAA,SAAS,MAAM;AACpC,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,eAAeD,IAAAA,SAAS,MAAM;AAClC,aAAOC,QAAAA,MAAmB,YAAY,UAAU,CAAA;AAAA,IAClD,CAAC;AAED,UAAM,UAAUD,IAAAA,SAAS,MAAM;AAC7B,UAAI,CAAC,OAAO,SAAS,CAACE,KAAAA,MAAW,KAAK,IAAK,QAAO;AAGlD,aAAO,OAAO,MAAM,SAAS,QAAQ,QAAQA,KAAAA,MAAW,KAAK;AAAA,IAC/D,CAAC;AAGDD,YAAAA,MAAmB,gBAAgB;AAEnCA,YAAAA,MAAmB,cAAc;AAAA,MAC/B,QAAQ,CAAA;AAAA,MACR,SAAS,CAAA;AAAA,MACT,QAAQ,CAAA;AAAA,IACV;AACAA,YAAAA,MAAmB,iBAAiB,CAAA;AAGpC,UAAM,cAAc,YAAY;AAC9B,UAAI;AAEF,cAAM,MAAM,MAAM,OAAO;AACzB,YAAI,CAAC,KAAK;AACR,gBAAM,IAAI,MAAM,wBAAwB;AAAA,QAC1C;AAEA,cAAME,QAAAA,QAAqB,iBAAiB,GAAG;AAAA,MACjD,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7CC,gBAAAA,QAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAGAC,QAAAA,UAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,YAAW;AAEjB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"Artist.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Artist.vue"],"sourcesContent":["<template>\n <div class=\"w-100 pos-relative\">\n \n <!-- Artist not found -->\n <div v-if=\"hasLoaded && !artist\" class=\"flex-center flex-column flex pd-extra\">\n <h2 class=\"h2 mn-b-medium\">Artist Not Found</h2>\n <p class=\"p-regular t-transp mn-b-medium\">The artist you are looking for doesn't exist or may have been removed.</p>\n <Button\n :submit=\"() => router.push({ name: 'music-home' })\"\n class=\"bg-main \"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n Back to Music\n </Button>\n </div>\n \n <!-- Artist content -->\n <div v-if=\"artist\">\n <!-- Cover image -->\n <div \n class=\"w-100 t-white h-50vh pos-relative\"\n :style=\"artist.coverUrl ? `background-image: url(${FILE_SERVER_URL + artist.coverUrl}); background-size: cover; background-position: center;` : ''\"\n >\n <div class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small\" :class=\"artist.coverUrl ? 'bg-black-transp-50' : 'bg-dark'\"></div>\n \n <!-- Artist actions for edit/manage -->\n <div v-if=\"isOwner\" class=\"pos-absolute pos-t-medium pos-r-medium z-index-1\">\n <Button\n @click=\"router.push({ name: 'artist-edit', params: { url: artist.url } })\"\n class=\"bg-main mn-r-small\"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n Edit Artist\n </Button>\n \n <Button\n @click=\"router.push({ name: 'artist-manage-content', params: { artistId: artist._id } })\"\n class=\"bg-white t-black\"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n Manage Content\n </Button>\n </div>\n \n <!-- Artist profile info -->\n <div class=\"flex-v-center t-white pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center\">\n <div class=\"w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium\">\n <img\n v-if=\"artist.photoUrl\"\n :src=\"FILE_SERVER_URL + (artist.photoUrl \|\| '/logo/logo-placeholder.jpg')\"\n alt=\"Artist photo\"\n class=\"w-100 h-100 object-fit-cover\"\n />\n <div v-else class=\"w-100 h-100 bg-black flex-center flex\">\n <span class=\"h1 t-white\">{{ artist?.name?.[0] \|\| 'A' }}</span>\n </div>\n </div>\n \n <div class=\" mobile:t-center\">\n <div class=\"flex-v-center flex-nowrap flex mn-b-small mobile:flex-center\">\n <h1 class=\"h1 mn-r-small\">{{ artist.name }}</h1>\n <span v-if=\"artist.isVerified\" class=\"bg-main-nano pd-micro radius-small\">\n ✓ Verified\n </span>\n </div>\n \n <p v-if=\"artist.location\" class=\"p-regular mn-b-small\">{{ artist.location }}</p>\n \n <!-- Social media links -->\n <div class=\"flex flex-nowrap gap-small mobile:flex-center\">\n <a \n v-if=\"artist.socials.telegram\" \n :href=\"`https://t.me/${artist.socials.telegram}`\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>T</span>\n </a>\n \n <a \n v-if=\"artist.socials.twitter\" \n :href=\"`https://twitter.com/${artist.socials.twitter}`\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>𝕏</span>\n </a>\n \n <a \n v-if=\"artist.socials.instagram\" \n :href=\"`https://instagram.com/${artist.socials.instagram}`\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>I</span>\n </a>\n \n <a \n v-if=\"artist.socials.facebook\" \n :href=\"`https://facebook.com/${artist.socials.facebook}`\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>F</span>\n </a>\n \n <a \n v-if=\"artist.website\" \n :href=\"artist.website\" \n target=\"_blank\"\n class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n >\n <span>W</span>\n </a>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Main content -->\n <div class=\"pd-medium\">\n <div class=\"cols-2-1_2 gap-regular mobile:cols-1\">\n <!-- Left column - Bio and details -->\n <div>\n <div class=\"bg-light pd-medium radius-medium mn-b-medium\">\n <h2 class=\"h3 mn-b-small\">Biography</h2>\n <p v-if=\"artist.bio\" class=\"p-regular\">{{ artist.bio }}</p>\n <p v-else class=\"p-regular t-transp\">No biography available for this artist.</p>\n </div>\n \n <!-- Genres -->\n <div v-if=\"genres.length > 0\" class=\"bg-light pd-medium radius-medium\">\n <h2 class=\"h3 mn-b-small\">Genres</h2>\n <div class=\"flex flex-wrap gap-small\">\n <span \n v-for=\"genre in genres\" \n :key=\"genre._id\"\n class=\"bg-white pd-thin radius-medium\"\n >\n {{ genre.name }}\n </span>\n </div>\n </div>\n </div>\n \n <!-- Right column - Discography -->\n <div>\n <!-- Albums section -->\n <div v-if=\"discography.albums.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n <h2 class=\"h3 mn-b-medium\">Albums</h2>\n \n <div class=\"cols-2 gap-small mobile:cols-1\">\n <div\n v-for=\"album in discography.albums\"\n :key=\"album._id\"\n class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n @click=\"router.push({ name: 'album', params: { url: album.url } })\"\n >\n <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n <img\n v-if=\"album.coverUrl\"\n :src=\"FILE_SERVER_URL + album.coverUrl\"\n alt=\"Album cover\"\n class=\"w-100 h-100 object-fit-cover\"\n />\n <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n <span>A</span>\n </div>\n </div>\n \n <div class=\"w-100 o-hidden\">\n <p class=\"p-regular t-truncate\">{{ album.title }}</p>\n <p class=\"p-small t-transp\">{{ formatDate(album.releaseDate) }}</p>\n </div>\n </div>\n </div>\n \n <Button\n v-if=\"discography.albums.length > 4\"\n @click=\"router.push({ name: 'artist-albums', params: { artistId: artist._id } })\"\n class=\"mn-t-small w-100 bg-white t-black\"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n View All Albums\n </Button>\n </div>\n \n <!-- Singles section -->\n <div v-if=\"discography.singles.length > 0\" class=\"bg-light pd-medium mn-b-medium radius-medium\">\n <h2 class=\"h3 mn-b-medium\">Singles & EPs</h2>\n \n <div class=\"cols-1 gap-small\">\n <div\n v-for=\"single in discography.singles\"\n :key=\"single._id\"\n class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n @click=\"router.push({ name: 'track', params: { url: single.url } })\"\n >\n <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n <img\n v-if=\"single.coverUrl\"\n :src=\"FILE_SERVER_URL + single.coverUrl\"\n alt=\"Single cover\"\n class=\"w-100 h-100 object-fit-cover\"\n />\n <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n <span>S</span>\n </div>\n </div>\n \n <div class=\"w-100 o-hidden\">\n <p class=\"p-regular t-truncate\">{{ single.title }}</p>\n <p class=\"p-small t-transp\">{{ formatDate(single.releaseDate) }}</p>\n </div>\n </div>\n </div>\n \n <Button\n v-if=\"discography.singles.length > 5\"\n @click=\"router.push({ name: 'artist-singles', params: { artistId: artist._id } })\"\n class=\"mn-t-small w-100 bg-white t-black\"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n View All Singles & EPs\n </Button>\n </div>\n \n <!-- Popular Tracks Section -->\n <div v-if=\"artistTracks.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n <h2 class=\"h3 mn-b-medium\">Popular Tracks</h2>\n \n <div class=\"bg-white radius-medium o-hidden\">\n <TrackListCard\n v-for=\"(track, index) in artistTracks\"\n :key=\"track._id\"\n :track=\"track\"\n :index=\"index\"\n :showAlbum=\"true\"\n :showCover=\"true\"\n />\n </div>\n </div>\n \n <!-- No discography yet -->\n <div \n v-if=\"discography.albums.length === 0 && discography.singles.length === 0\" \n class=\"bg-light pd-medium radius-medium t-center\"\n >\n <p class=\"p-regular mn-b-small\">No releases yet</p>\n <p class=\"p-small t-transp\">This artist hasn't released any albums or singles yet.</p>\n \n <Button\n v-if=\"isOwner\"\n @click=\"router.push({ name: 'release-create', query: { artistId: artist._id } })\"\n class=\"mn-t-medium bg-main \"\n :showSucces=\"false\"\n :showLoader=\"false\"\n >\n Add Release\n </Button>\n </div>\n </div>\n </div>\n \n <!-- Related Artists -->\n <div v-if=\"relatedArtists.length > 0\" class=\"mn-t-medium\">\n <h2 class=\"h3 mn-b-medium\">Fans Also Like</h2>\n \n <div class=\"cols-5 gap-regular mobile:cols-2\">\n <div\n v-for=\"relatedArtist in relatedArtists\"\n :key=\"relatedArtist._id\"\n class=\"t-center cursor-pointer\"\n @click=\"router.push({ name: 'artist', params: { url: relatedArtist.url } })\"\n >\n <div class=\"w-100 aspect-1x1 radius-medium o-hidden mn-b-small\">\n <img\n v-if=\"relatedArtist.photoUrl\"\n :src=\"FILE_SERVER_URL + relatedArtist.photoUrl\"\n alt=\"Artist photo\"\n class=\"w-100 h-100 object-fit-cover\"\n />\n <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n <span>{{ relatedArtist?.name?.[0] \|\| 'A' }}</span>\n </div>\n </div>\n \n <p class=\"p-regular t-truncate\">{{ relatedArtist.name }}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\n// import * as genreStore from '../../store/genres'; // Assuming you have a genre store\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\n// Import mixins\nimport { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\nconst { formatDate } = useGlobalMixins();\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst genres = ref([]);\nconst hasLoaded = ref(false);\n\n// Computed\nconst artist = computed(() => {\n return artistsStore.state.currentArtist;\n});\n\nconst discography = computed(() => {\n return artistsStore.state.discography;\n});\n\nconst relatedArtists = computed(() => {\n return artistsStore.state.relatedArtists;\n});\n\nconst artistTracks = computed(() => {\n return artistsStore.state.discography.tracks \|\| [];\n});\n\nconst isOwner = computed(() => {\n if (!artist.value \|\| !auth.state.user._id) return false;\n \n // Check if current user is the creator of the artist\n return artist.value.creator?.target?._id === auth.state.user._id;\n});\n\n// Clear current artist state\nartistsStore.state.currentArtist = null;\n// Clear discography state\nartistsStore.state.discography = {\n albums: [],\n singles: [],\n tracks: []\n};\nartistsStore.state.relatedArtists = [];\n\n// Methods\nconst fetchArtist = async () => {\n try {\n // Get URL from route params\n const url = route.params.url;\n if (!url) {\n throw new Error('Artist URL is required');\n }\n \n await artistsStore.actions.fetchArtistByUrl(url);\n } catch (error) {\n console.error('Error fetching artist:', error);\n globals.actions.setError({\n message: 'Failed to load artist'\n });\n }\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n emits('page-loading');\n \n await fetchArtist();\n \n hasLoaded.value = true;\n emits('page-loaded');\n});\n</script>"],"names":["useGlobalMixins","useRouter","useRoute","ref","computed","artistsStore.state","auth.state","artistsStore.actions","globals.actions","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8TA,UAAM,EAAE,WAAU,IAAKA,uBAAe;AAGtC,UAAM,SAASC,UAAAA,UAAS;AACxB,UAAM,QAAQC,UAAAA,SAAQ;AAGtB,UAAM,QAAQ;AAGd,UAAM,SAASC,IAAAA,IAAI,EAAE;AACrB,UAAM,YAAYA,IAAAA,IAAI,KAAK;AAG3B,UAAM,SAASC,IAAAA,SAAS,MAAM;AAC5B,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,cAAcD,IAAAA,SAAS,MAAM;AACjC,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,iBAAiBD,IAAAA,SAAS,MAAM;AACpC,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,eAAeD,IAAAA,SAAS,MAAM;AAClC,aAAOC,QAAAA,MAAmB,YAAY,UAAU,CAAA;AAAA,IAClD,CAAC;AAED,UAAM,UAAUD,IAAAA,SAAS,MAAM;AAC7B,UAAI,CAAC,OAAO,SAAS,CAACE,KAAAA,MAAW,KAAK,IAAK,QAAO;AAGlD,aAAO,OAAO,MAAM,SAAS,QAAQ,QAAQA,KAAAA,MAAW,KAAK;AAAA,IAC/D,CAAC;AAGDD,YAAAA,MAAmB,gBAAgB;AAEnCA,YAAAA,MAAmB,cAAc;AAAA,MAC/B,QAAQ,CAAA;AAAA,MACR,SAAS,CAAA;AAAA,MACT,QAAQ,CAAA;AAAA,IACV;AACAA,YAAAA,MAAmB,iBAAiB,CAAA;AAGpC,UAAM,cAAc,YAAY;AAC9B,UAAI;AAEF,cAAM,MAAM,MAAM,OAAO;AACzB,YAAI,CAAC,KAAK;AACR,gBAAM,IAAI,MAAM,wBAAwB;AAAA,QAC1C;AAEA,cAAME,QAAAA,QAAqB,iBAAiB,GAAG;AAAA,MACjD,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7CC,gBAAAA,QAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAGAC,QAAAA,UAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,YAAW;AAEjB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/pages/Artist.vue.js CHANGED Viewed

@@ -34,7 +34,7 @@ const _hoisted_13 = {
 };
 const _hoisted_14 = {
   key: 0,
-  class: "p-medium mn-b-small"
+  class: "p-regular mn-b-small"
 };
 const _hoisted_15 = { class: "flex flex-nowrap gap-small mobile:flex-center" };
 const _hoisted_16 = ["href"];
@@ -43,15 +43,15 @@ const _hoisted_18 = ["href"];
 const _hoisted_19 = ["href"];
 const _hoisted_20 = ["href"];
 const _hoisted_21 = { class: "pd-medium" };
-const _hoisted_22 = { class: "cols-2-1_2 gap-medium mobile:cols-1" };
+const _hoisted_22 = { class: "cols-2-1_2 gap-regular mobile:cols-1" };
 const _hoisted_23 = { class: "bg-light pd-medium radius-medium mn-b-medium" };
 const _hoisted_24 = {
   key: 0,
-  class: "p-medium"
+  class: "p-regular"
 };
 const _hoisted_25 = {
   key: 1,
-  class: "p-medium t-transp"
+  class: "p-regular t-transp"
 };
 const _hoisted_26 = {
   key: 0,
@@ -71,7 +71,7 @@ const _hoisted_33 = {
   class: "w-100 h-100 bg-light flex-center flex"
 };
 const _hoisted_34 = { class: "w-100 o-hidden" };
-const _hoisted_35 = { class: "p-medium t-truncate" };
+const _hoisted_35 = { class: "p-regular t-truncate" };
 const _hoisted_36 = { class: "p-small t-transp" };
 const _hoisted_37 = {
   key: 1,
@@ -86,7 +86,7 @@ const _hoisted_42 = {
   class: "w-100 h-100 bg-light flex-center flex"
 };
 const _hoisted_43 = { class: "w-100 o-hidden" };
-const _hoisted_44 = { class: "p-medium t-truncate" };
+const _hoisted_44 = { class: "p-regular t-truncate" };
 const _hoisted_45 = { class: "p-small t-transp" };
 const _hoisted_46 = {
   key: 2,
@@ -101,7 +101,7 @@ const _hoisted_49 = {
   key: 0,
   class: "mn-t-medium"
 };
-const _hoisted_50 = { class: "cols-5 gap-medium mobile:cols-2" };
+const _hoisted_50 = { class: "cols-5 gap-regular 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"];
@@ -109,7 +109,7 @@ const _hoisted_54 = {
   key: 1,
   class: "w-100 h-100 bg-light flex-center flex"
 };
-const _hoisted_55 = { class: "p-medium t-truncate" };
+const _hoisted_55 = { class: "p-regular t-truncate" };
 const _sfc_main = {
   __name: "Artist",
   emits: ["page-loading", "page-loaded"],
@@ -167,7 +167,7 @@ const _sfc_main = {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         hasLoaded.value && !artist.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
           _cache[6] || (_cache[6] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Artist Not Found", -1)),
-          _cache[7] || (_cache[7] = 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)),
+          _cache[7] || (_cache[7] = createElementVNode("p", { class: "p-regular t-transp mn-b-medium" }, "The artist you are looking for doesn't exist or may have been removed.", -1)),
           createVNode(_sfc_main$1, {
             submit: () => unref(router).push({ name: "music-home" }),
             class: "bg-main",
@@ -387,7 +387,7 @@ const _sfc_main = {
                   ])
                 ])) : createCommentVNode("", true),
                 discography.value.albums.length === 0 && discography.value.singles.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_48, [
-                  _cache[25] || (_cache[25] = createElementVNode("p", { class: "p-medium mn-b-small" }, "No releases yet", -1)),
+                  _cache[25] || (_cache[25] = createElementVNode("p", { class: "p-regular mn-b-small" }, "No releases yet", -1)),
                   _cache[26] || (_cache[26] = createElementVNode("p", { class: "p-small t-transp" }, "This artist hasn't released any albums or singles yet.", -1)),
                   isOwner.value ? (openBlock(), createBlock(_sfc_main$1, {
                     key: 0,