npm - @ozdao/martyrs - Versions diffs - 0.2.570 → 0.2.572 - Mend

@ozdao/martyrs 0.2.570 → 0.2.572

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 (832) hide show

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 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 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 <ActionButtons :buttons=\"actionButtons\" />\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-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 ActionButtons from '../blocks/ActionButtons.vue';\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 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\nconst actionButtons = computed(() => {\n const buttons = [\n {\n type: 'button',\n class: 't-white bg-black',\n icon: IconPlay,\n iconFill: 'rgb(var(--white))',\n text: 'Play All',\n action: playAlbum\n },\n {\n type: 'button',\n class: 'bg-light',\n icon: IconShuffle,\n text: 'Shuffle',\n action: shufflePlay\n },\n {\n type: 'button',\n class: 'bg-light',\n icon: IconLike,\n iconFill: isFavorite.value ? 'rgb(var(--main))' : 'rgb(var(--black))',\n text: isFavorite.value ? 'Liked' : 'Like',\n action: toggleFavorite\n },\n {\n type: 'dropdown',\n items: [\n { text: 'Add to Queue', action: addToQueue },\n { text: 'Copy Link', action: copyLink },\n { text: 'Add to Playlist', action: addToPlaylist }\n ]\n }\n ];\n\n if (isOwner.value) {\n const items = buttons[3].items;\n items.push({ separator: true });\n items.push({ text: 'Edit Album', action: editAlbum });\n items.push({ text: 'Delete Album', action: deleteAlbum, color: 'danger' });\n }\n\n return buttons;\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 }\n};\n\nconst addToPlaylist = () => {\n // TODO: Implement add to playlist\n console.log('Add album to playlist');\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};\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","IconPlay","IconShuffle","IconLike","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 fw-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 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 mn-b-small radius-medium o-hidden\"\n />\n <!-- Quick Stats -->\n <div class=\"stats-grid d-grid cols-2 mobile:cols-1 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 fw-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 fw-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 <ActionButtons :buttons=\"actionButtons\" />\n\n <!-- Artists Cards -->\n <div class=\"artists-section mn-b-medium\">\n <h3 class=\"fw-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=\"fw-medium mn-b-small\">Metadata</h3>\n <div class=\"metadata-grid d-grid cols-2 mobile:cols-1 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-main\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Released</div>\n <div class=\"fw-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-main\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Duration</div>\n <div class=\"fw-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-main\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Label</div>\n <div class=\"fw-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-main\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n <div class=\"fw-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=\"fw-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 fw-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-main hover:opacity-70\"\n >\n See all\n </router-link>\n </div>\n <div class=\"flex flex-nowrap gap-small o-x-scroll overscroll-x-contain scroll-smooth scroll-snap-x-mandatory scroll-hide\"\n >\n <li v-for=\"relatedAlbum in moreAlbums\" :key=\"album._id\" class=\"flex-none scroll-snap-start\">\n <AlbumCard :album=\"relatedAlbum\" class=\"w-15r ease-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 ActionButtons from '../blocks/ActionButtons.vue';\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 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\nconst actionButtons = computed(() => {\n const buttons = [\n {\n type: 'button',\n class: 't-white bg-black',\n icon: IconPlay,\n iconFill: 'rgb(var(--white))',\n text: 'Play All',\n action: playAlbum\n },\n {\n type: 'button',\n class: 'bg-light',\n icon: IconShuffle,\n text: 'Shuffle',\n action: shufflePlay\n },\n {\n type: 'button',\n class: 'bg-light',\n icon: IconLike,\n iconFill: isFavorite.value ? 'rgb(var(--main))' : 'rgb(var(--black))',\n text: isFavorite.value ? 'Liked' : 'Like',\n action: toggleFavorite\n },\n {\n type: 'dropdown',\n items: [\n { text: 'Add to Queue', action: addToQueue },\n { text: 'Copy Link', action: copyLink },\n { text: 'Add to Playlist', action: addToPlaylist }\n ]\n }\n ];\n\n if (isOwner.value) {\n const items = buttons[3].items;\n items.push({ separator: true });\n items.push({ text: 'Edit Album', action: editAlbum });\n items.push({ text: 'Delete Album', action: deleteAlbum, color: 'danger' });\n }\n\n return buttons;\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 }\n};\n\nconst addToPlaylist = () => {\n // TODO: Implement add to playlist\n console.log('Add album to playlist');\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};\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","IconPlay","IconShuffle","IconLike","playerActions","albumsActions"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { ref, computed, onMounted, createElementBlock, openBlock, createCommentVNode, createElementVNode, createVNode, unref, withCtx, createTextVNode, normalizeStyle, normalizeClass, toDisplayString, Fragment, renderList, createBlock } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 /* empty css                                       */
 import _sfc_main$2 from "../cards/TrackListCard.vue.js";
 import { state, actions } from "../../store/artists.js";
@@ -15,7 +15,7 @@ const _hoisted_2 = {
 const _hoisted_3 = { key: 1 };
 const _hoisted_4 = {
   key: 0,
-  class: "pos-absolute pos-t-medium pos-r-medium z-index-1"
+  class: "pos-absolute pos-t-small pos-r-small z-index-1"
 };
 const _hoisted_5 = { 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" };
 const _hoisted_6 = { class: "w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium" };
@@ -43,7 +43,7 @@ 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-regular mobile:cols-1" };
+const _hoisted_22 = { class: "cols-[1fr_2fr] gap-regular mobile:cols-1" };
 const _hoisted_23 = { class: "bg-light pd-medium radius-medium mn-b-medium" };
 const _hoisted_24 = {
   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-regular t-truncate" };
+const _hoisted_35 = { class: "p-regular 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-regular t-truncate" };
+const _hoisted_44 = { class: "p-regular truncate" };
 const _hoisted_45 = { class: "p-small t-transp" };
 const _hoisted_46 = {
   key: 2,
@@ -109,7 +109,7 @@ const _hoisted_54 = {
   key: 1,
   class: "w-100 h-100 bg-light flex-center flex"
 };
-const _hoisted_55 = { class: "p-regular t-truncate" };
+const _hoisted_55 = { class: "p-regular truncate" };
 const _sfc_main = {
   __name: "Artist",
   emits: ["page-loading", "page-loaded"],
@@ -301,7 +301,7 @@ const _sfc_main = {
                     (openBlock(true), createElementBlock(Fragment, null, renderList(discography.value.albums, (album) => {
                       return openBlock(), createElementBlock("div", {
                         key: album._id,
-                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white",
+                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover:bg-white",
                         onClick: ($event) => unref(router).push({ name: "album", params: { url: album.url } })
                       }, [
                         createElementVNode("div", _hoisted_31, [
@@ -340,7 +340,7 @@ const _sfc_main = {
                     (openBlock(true), createElementBlock(Fragment, null, renderList(discography.value.singles, (single) => {
                       return openBlock(), createElementBlock("div", {
                         key: single._id,
-                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white",
+                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover:bg-white",
                         onClick: ($event) => unref(router).push({ name: "track", params: { url: single.url } })
                       }, [
                         createElementVNode("div", _hoisted_40, [

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Artist.vue.js","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 { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\n\n// Import mixins\nimport { useGlobalMixins } from '@martyrs/src/modules/core/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 store.core.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>\n"],"names":["artistsStore.state","auth.state","artistsStore.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4TA,UAAM,QAAQ,SAAQ;AAItB,UAAM,EAAE,WAAU,IAAK,gBAAe;AAGtC,UAAM,SAAS,UAAS;AACxB,UAAM,QAAQ,SAAQ;AAGtB,UAAM,QAAQ;AAGd,UAAM,SAAS,IAAI,EAAE;AACrB,UAAM,YAAY,IAAI,KAAK;AAG3B,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOA,MAAmB,YAAY,UAAU,CAAA;AAAA,IAClD,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,UAAI,CAAC,OAAO,SAAS,CAACC,QAAW,KAAK,IAAK,QAAO;AAGlD,aAAO,OAAO,MAAM,SAAS,QAAQ,QAAQA,QAAW,KAAK;AAAA,IAC/D,CAAC;AAGDD,UAAmB,gBAAgB;AAEnCA,UAAmB,cAAc;AAAA,MAC/B,QAAQ,CAAA;AAAA,MACR,SAAS,CAAA;AAAA,MACT,QAAQ,CAAA;AAAA,IACV;AACAA,UAAmB,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,QAAqB,iBAAiB,GAAG;AAAA,MACjD,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7C,cAAM,KAAK,QAAQ,SAAS;AAAA,UAC1B,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAGA,cAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,YAAW;AAEjB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"Artist.vue.js","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-small pos-r-small 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-[1fr_2fr] 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 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 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 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 { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\n\n// Import mixins\nimport { useGlobalMixins } from '@martyrs/src/modules/core/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 store.core.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>\n"],"names":["artistsStore.state","auth.state","artistsStore.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4TA,UAAM,QAAQ,SAAQ;AAItB,UAAM,EAAE,WAAU,IAAK,gBAAe;AAGtC,UAAM,SAAS,UAAS;AACxB,UAAM,QAAQ,SAAQ;AAGtB,UAAM,QAAQ;AAGd,UAAM,SAAS,IAAI,EAAE;AACrB,UAAM,YAAY,IAAI,KAAK;AAG3B,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOA,MAAmB,YAAY,UAAU,CAAA;AAAA,IAClD,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,UAAI,CAAC,OAAO,SAAS,CAACC,QAAW,KAAK,IAAK,QAAO;AAGlD,aAAO,OAAO,MAAM,SAAS,QAAQ,QAAQA,QAAW,KAAK;AAAA,IAC/D,CAAC;AAGDD,UAAmB,gBAAgB;AAEnCA,UAAmB,cAAc;AAAA,MAC/B,QAAQ,CAAA;AAAA,MACR,SAAS,CAAA;AAAA,MACT,QAAQ,CAAA;AAAA,IACV;AACAA,UAAmB,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,QAAqB,iBAAiB,GAAG;AAAA,MACjD,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7C,cAAM,KAAK,QAAQ,SAAS;AAAA,UAC1B,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAGA,cAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,YAAW;AAEjB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -8,8 +8,6 @@ import { state as state$2, actions as actions$2 } from "../../store/playlists.js
 import { state, actions } from "../../store/albums.js";
 import { state as state$1, actions as actions$1 } from "../../store/tracks.js";
 import { state as state$3, actions as actions$3 } from "../../store/artists.js";
-/* empty css               */
-import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "music-home-page pd-medium mobile:pd-thin" };
 const _hoisted_2 = { class: "mn-b-semi" };
 const _hoisted_3 = { class: "mn-b-medium" };
@@ -21,7 +19,7 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("section", _hoisted_2, [
-          _cache[0] || (_cache[0] = createElementVNode("div", { class: "flex-between flex mn-b-small" }, [
+          _cache[0] || (_cache[0] = createElementVNode("div", { class: "flex-justify-between flex mn-b-small" }, [
             createElementVNode("h3", { class: "" }, "New Releases")
           ], -1)),
           createVNode(_sfc_main$1, {
@@ -51,17 +49,17 @@ const _sfc_main = {
               horizontal: false,
               class: "h-max-15r"
             },
-            class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide"
+            class: "flex flex-nowrap gap-small o-x-scroll overscroll-x-contain scroll-smooth scroll-snap-x-mandatory scroll-hide"
           }, {
             default: withCtx(({ items }) => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(items, (album) => {
                 return openBlock(), createElementBlock("li", {
                   key: album._id,
-                  class: "flex-none scroll-snap-align-start"
+                  class: "flex-none scroll-snap-start"
                 }, [
                   createVNode(AlbumCard, {
                     album,
-                    class: "w-15r transition-cubic-in-out"
+                    class: "w-15r ease-cubic-in-out"
                   }, null, 8, ["album"])
                 ]);
               }), 128))
@@ -70,7 +68,7 @@ const _sfc_main = {
           }, 8, ["store"])
         ]),
         createElementVNode("section", _hoisted_3, [
-          _cache[1] || (_cache[1] = createElementVNode("div", { class: "flex-between flex mn-b-small" }, [
+          _cache[1] || (_cache[1] = createElementVNode("div", { class: "flex-justify-between flex mn-b-small" }, [
             createElementVNode("h3", { class: "" }, "Popular Tracks")
           ], -1)),
           createVNode(_sfc_main$1, {
@@ -116,7 +114,7 @@ const _sfc_main = {
           }, 8, ["store"])
         ]),
         createElementVNode("section", _hoisted_5, [
-          _cache[2] || (_cache[2] = createElementVNode("div", { class: "flex-between flex mn-b-small" }, [
+          _cache[2] || (_cache[2] = createElementVNode("div", { class: "flex-justify-between flex mn-b-small" }, [
             createElementVNode("h2", { class: "" }, "Featured Playlists")
           ], -1)),
           createVNode(_sfc_main$1, {
@@ -153,7 +151,7 @@ const _sfc_main = {
                 }, [
                   createVNode(PlaylistCard, {
                     playlist,
-                    class: "hover-scale-1 transition-cubic-in-out"
+                    class: "hover:scale-[1.05] ease-cubic-in-out"
                   }, null, 8, ["playlist"])
                 ]);
               }), 128))
@@ -162,7 +160,7 @@ const _sfc_main = {
           }, 8, ["store"])
         ]),
         createElementVNode("section", null, [
-          _cache[3] || (_cache[3] = createElementVNode("div", { class: "flex-between flex mn-b-small" }, [
+          _cache[3] || (_cache[3] = createElementVNode("div", { class: "flex-justify-between flex mn-b-small" }, [
             createElementVNode("h2", { class: "" }, "Top Artists")
           ], -1)),
           createVNode(_sfc_main$1, {
@@ -196,7 +194,7 @@ const _sfc_main = {
                 return openBlock(), createBlock(ArtistCard, {
                   key: artist._id,
                   artist,
-                  class: "hover-scale-1 transition-cubic-in-out"
+                  class: "hover:scale-[1.05] ease-cubic-in-out"
                 }, null, 8, ["artist"]);
               }), 128))
             ]),
@@ -207,8 +205,7 @@ const _sfc_main = {
     };
   }
 };
-const MusicHome = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f86a5570"]]);
 export {
-  MusicHome as default
+  _sfc_main as default
 };
 //# sourceMappingURL=MusicHome.vue.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MusicHome.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"MusicHome.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -5,7 +5,7 @@ import _sfc_main$3 from "../cards/TrackListCard.vue.js";
 import AlbumCard from "../cards/AlbumCard.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
 import ArtistCard from "../cards/ArtistCard.vue.js";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 import { state } from "../../../auth/views/store/auth.js";
 import { state as state$1, actions } from "../../store/playlists.js";
 import { state as state$2, actions as actions$1 } from "../../store/albums.js";
@@ -18,22 +18,22 @@ const _hoisted_4 = {
   key: 0,
   class: "playlists-tab"
 };
-const _hoisted_5 = { class: "flex-between flex mn-b-small" };
+const _hoisted_5 = { class: "flex-justify-between flex mn-b-small" };
 const _hoisted_6 = {
   key: 1,
   class: "albums-tab"
 };
-const _hoisted_7 = { class: "flex-between flex mn-b-small" };
+const _hoisted_7 = { class: "flex-justify-between flex mn-b-small" };
 const _hoisted_8 = {
   key: 2,
   class: "artists-tab"
 };
-const _hoisted_9 = { class: "flex-between flex mn-b-small" };
+const _hoisted_9 = { class: "flex-justify-between flex mn-b-small" };
 const _hoisted_10 = {
   key: 3,
   class: "tracks-tab"
 };
-const _hoisted_11 = { class: "flex-between flex mn-b-small" };
+const _hoisted_11 = { class: "flex-justify-between flex mn-b-small" };
 const _hoisted_12 = { class: "bg-light radius-medium o-hidden" };
 const _sfc_main = {
   __name: "MusicLibrary",
@@ -56,7 +56,7 @@ const _sfc_main = {
                 key: tab.id,
                 onClick: ($event) => activeTab.value = tab.id,
                 class: normalizeClass([[
-                  activeTab.value === tab.id ? "bg-white t-black" : "bg-white-transp-50  hover-bg-white"
+                  activeTab.value === tab.id ? "bg-white t-black" : "bg-white-transp-50  hover:bg-white"
                 ], "radius-extra pd-small"]),
                 showLoader: false,
                 showSucces: false
@@ -74,7 +74,7 @@ const _sfc_main = {
             _cache[5] || (_cache[5] = createElementVNode("h2", { class: "" }, "Your Playlists", -1)),
             createVNode(_sfc_main$1, {
               onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({ name: "playlist-create" })),
-              class: "bg-main radius-small pd-small hover-scale-1",
+              class: "bg-main radius-small pd-small hover:scale-[1.05]",
               showLoader: false,
               showSucces: false
             }, {
@@ -116,7 +116,7 @@ const _sfc_main = {
             _cache[7] || (_cache[7] = createElementVNode("h2", { class: "" }, "Your Albums", -1)),
             createVNode(_sfc_main$1, {
               onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$router.push({ name: "album-create" })),
-              class: "bg-main radius-small pd-small hover-scale-1",
+              class: "bg-main radius-small pd-small hover:scale-[1.05]",
               showLoader: false,
               showSucces: false
             }, {
@@ -158,7 +158,7 @@ const _sfc_main = {
             _cache[9] || (_cache[9] = createElementVNode("h2", { class: "" }, "Your Artists", -1)),
             createVNode(_sfc_main$1, {
               onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$router.push({ name: "artist-create" })),
-              class: "bg-main radius-small pd-small hover-scale-1",
+              class: "bg-main radius-small pd-small hover:scale-[1.05]",
               showLoader: false,
               showSucces: false
             }, {
@@ -200,7 +200,7 @@ const _sfc_main = {
             _cache[11] || (_cache[11] = createElementVNode("h2", { class: "" }, "Your Tracks", -1)),
             createVNode(_sfc_main$1, {
               onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$router.push({ name: "track-create" })),
-              class: "bg-main radius-small pd-small hover-scale-1",
+              class: "bg-main radius-small pd-small hover:scale-[1.05]",
               showLoader: false,
               showSucces: false
             }, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MusicLibrary.vue.js","sources":["../../../../../../../src/modules/music/components/pages/MusicLibrary.vue"],"sourcesContent":["<!-- components/pages/MusicLibrary.vue -->\n<template>\n <div class=\"music-library-page\">\n <h1 class=\" mn-b-medium\">Your Library</h1>\n \n <!-- Filter Tabs -->\n <div class=\"library-tabs mn-b-medium\">\n <div class=\"flex gap-small\">\n <Button \n v-for=\"tab in tabs\"\n :key=\"tab.id\"\n @click=\"activeTab = tab.id\"\n :class=\"[\n activeTab === tab.id ? 'bg-white t-black' : 'bg-white-transp-50 hover-bg-white',\n ]\"\n class=\"radius-extra pd-small\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n {{ tab.label }}\n </Button>\n </div>\n </div>\n \n <!-- Playlists Tab -->\n <div v-if=\"activeTab === 'playlists'\" class=\"playlists-tab\">\n <div class=\"flex-between flex mn-b-small\">\n <h2 class=\"\">Your Playlists</h2>\n <Button \n @click=\"$router.push({ name: 'playlist-create' })\"\n class=\"bg-main radius-small pd-small hover-scale-1\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n Create Playlist\n </Button>\n </div>\n \n <Feed\n :store=\"{\n read: (options) => playlistsActions.fetchPlaylists(options),\n state: playlistsState\n }\"\n :options=\"{ creator: authState.user._id }\"\n :states=\"{\n empty: {\n title: 'No playlists yet',\n description: 'Create your first playlist to see it here',\n class: 'pd-big bg-white-transp-10 radius-medium'\n }\n }\"\n class=\"gap-regular\"\n >\n <template #default=\"{ items }\">\n <PlaylistCard\n v-for=\"playlist in items\"\n :key=\"playlist._id\"\n :playlist=\"playlist\"\n class=\"w-100\"\n />\n </template>\n </Feed>\n </div>\n \n <!-- Albums Tab -->\n <div v-if=\"activeTab === 'albums'\" class=\"albums-tab\">\n <div class=\"flex-between flex mn-b-small\">\n <h2 class=\"\">Your Albums</h2>\n <Button \n @click=\"$router.push({ name: 'album-create' })\"\n class=\"bg-main radius-small pd-small hover-scale-1\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n Create Album\n </Button>\n </div>\n \n <Feed\n :store=\"{\n read: (options) => albumsActions.fetchAlbums({ ...options, owner: { type: 'user', target: authState.user._id } }),\n state: albumsState\n }\"\n :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n :states=\"{\n empty: {\n title: 'No albums yet',\n description: 'Upload your first album to see it here',\n class: 'pd-big bg-white-transp-10 radius-medium'\n }\n }\"\n class=\"gap-regular\"\n >\n <template #default=\"{ items }\">\n <AlbumCard\n v-for=\"album in items\"\n :key=\"album._id\"\n :album=\"album\"\n class=\"w-100\"\n />\n </template>\n </Feed>\n </div>\n \n <!-- Artists Tab -->\n <div v-if=\"activeTab === 'artists'\" class=\"artists-tab\">\n <div class=\"flex-between flex mn-b-small\">\n <h2 class=\"\">Your Artists</h2>\n <Button \n @click=\"$router.push({ name: 'artist-create' })\"\n class=\"bg-main radius-small pd-small hover-scale-1\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n Create Artist\n </Button>\n </div>\n \n <Feed\n :store=\"{\n read: (options) => artistsActions.fetchArtists({ ...options, owner: { type: 'user', target: authState.user._id } }),\n state: artistsState\n }\"\n :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n :states=\"{\n empty: {\n title: 'No artists yet',\n description: 'Create your first artist profile to see it here',\n class: 'pd-big bg-white-transp-10 radius-medium'\n }\n }\"\n class=\"gap-regular\"\n >\n <template #default=\"{ items }\">\n <ArtistCard\n v-for=\"artist in items\"\n :key=\"artist._id\"\n :artist=\"artist\"\n class=\"w-100\"\n />\n </template>\n </Feed>\n </div>\n \n <!-- Tracks Tab -->\n <div v-if=\"activeTab === 'tracks'\" class=\"tracks-tab\">\n <div class=\"flex-between flex mn-b-small\">\n <h2 class=\"\">Your Tracks</h2>\n <Button \n @click=\"$router.push({ name: 'track-create' })\"\n class=\"bg-main radius-small pd-small hover-scale-1\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n Upload Track\n </Button>\n </div>\n \n <Feed\n :store=\"{\n read: (options) => tracksActions.fetchTracks({ ...options, owner: { type: 'user', target: authState.user._id } }),\n state: tracksState\n }\"\n :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n :states=\"{\n empty: {\n title: 'No tracks yet',\n description: 'Upload your first track to see it here',\n class: 'pd-big bg-white-transp-10 radius-medium'\n }\n }\"\n class=\"gap-regular\"\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\"\n :showAlbum=\"true\"\n :showCover=\"true\"\n />\n </div>\n </template>\n </Feed>\n </div>\n \n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { useRouter } from 'vue-router';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport PlaylistCard from '../cards/PlaylistCard.vue';\nimport ArtistCard from '../cards/ArtistCard.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\n\n// Import store modules\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { state as artistsState, actions as artistsActions } from '../../store/artists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\n\nconst router = useRouter();\n\n// State\nconst activeTab = ref('playlists');\n\n// Tabs configuration\nconst tabs = [\n { id: 'playlists', label: 'Playlists' },\n { id: 'albums', label: 'Albums' },\n { id: 'artists', label: 'Artists' },\n { id: 'tracks', label: 'Tracks' }\n];\n\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgNe,cAAS;AAGxB,UAAM,YAAY,IAAI,WAAW;AAGjC,UAAM,OAAO;AAAA,MACX,EAAE,IAAI,aAAa,OAAO,YAAW;AAAA,MACrC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,MAC/B,EAAE,IAAI,WAAW,OAAO,UAAS;AAAA,MACjC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"MusicLibrary.vue.js","sources":["../../../../../../../src/modules/music/components/pages/MusicLibrary.vue"],"sourcesContent":["<!-- components/pages/MusicLibrary.vue -->\n<template>\n <div class=\"music-library-page\">\n <h1 class=\" mn-b-medium\">Your Library</h1>\n \n <!-- Filter Tabs -->\n <div class=\"library-tabs mn-b-medium\">\n <div class=\"flex gap-small\">\n <Button \n v-for=\"tab in tabs\"\n :key=\"tab.id\"\n @click=\"activeTab = tab.id\"\n :class=\"[\n activeTab === tab.id ? 'bg-white t-black' : 'bg-white-transp-50 hover:bg-white',\n ]\"\n class=\"radius-extra pd-small\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n {{ tab.label }}\n </Button>\n </div>\n </div>\n \n <!-- Playlists Tab -->\n <div v-if=\"activeTab === 'playlists'\" class=\"playlists-tab\">\n <div class=\"flex-justify-between flex mn-b-small\">\n <h2 class=\"\">Your Playlists</h2>\n <Button \n @click=\"$router.push({ name: 'playlist-create' })\"\n class=\"bg-main radius-small pd-small hover:scale-[1.05]\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n Create Playlist\n </Button>\n </div>\n \n <Feed\n :store=\"{\n read: (options) => playlistsActions.fetchPlaylists(options),\n state: playlistsState\n }\"\n :options=\"{ creator: authState.user._id }\"\n :states=\"{\n empty: {\n title: 'No playlists yet',\n description: 'Create your first playlist to see it here',\n class: 'pd-big bg-white-transp-10 radius-medium'\n }\n }\"\n class=\"gap-regular\"\n >\n <template #default=\"{ items }\">\n <PlaylistCard\n v-for=\"playlist in items\"\n :key=\"playlist._id\"\n :playlist=\"playlist\"\n class=\"w-100\"\n />\n </template>\n </Feed>\n </div>\n \n <!-- Albums Tab -->\n <div v-if=\"activeTab === 'albums'\" class=\"albums-tab\">\n <div class=\"flex-justify-between flex mn-b-small\">\n <h2 class=\"\">Your Albums</h2>\n <Button \n @click=\"$router.push({ name: 'album-create' })\"\n class=\"bg-main radius-small pd-small hover:scale-[1.05]\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n Create Album\n </Button>\n </div>\n \n <Feed\n :store=\"{\n read: (options) => albumsActions.fetchAlbums({ ...options, owner: { type: 'user', target: authState.user._id } }),\n state: albumsState\n }\"\n :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n :states=\"{\n empty: {\n title: 'No albums yet',\n description: 'Upload your first album to see it here',\n class: 'pd-big bg-white-transp-10 radius-medium'\n }\n }\"\n class=\"gap-regular\"\n >\n <template #default=\"{ items }\">\n <AlbumCard\n v-for=\"album in items\"\n :key=\"album._id\"\n :album=\"album\"\n class=\"w-100\"\n />\n </template>\n </Feed>\n </div>\n \n <!-- Artists Tab -->\n <div v-if=\"activeTab === 'artists'\" class=\"artists-tab\">\n <div class=\"flex-justify-between flex mn-b-small\">\n <h2 class=\"\">Your Artists</h2>\n <Button \n @click=\"$router.push({ name: 'artist-create' })\"\n class=\"bg-main radius-small pd-small hover:scale-[1.05]\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n Create Artist\n </Button>\n </div>\n \n <Feed\n :store=\"{\n read: (options) => artistsActions.fetchArtists({ ...options, owner: { type: 'user', target: authState.user._id } }),\n state: artistsState\n }\"\n :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n :states=\"{\n empty: {\n title: 'No artists yet',\n description: 'Create your first artist profile to see it here',\n class: 'pd-big bg-white-transp-10 radius-medium'\n }\n }\"\n class=\"gap-regular\"\n >\n <template #default=\"{ items }\">\n <ArtistCard\n v-for=\"artist in items\"\n :key=\"artist._id\"\n :artist=\"artist\"\n class=\"w-100\"\n />\n </template>\n </Feed>\n </div>\n \n <!-- Tracks Tab -->\n <div v-if=\"activeTab === 'tracks'\" class=\"tracks-tab\">\n <div class=\"flex-justify-between flex mn-b-small\">\n <h2 class=\"\">Your Tracks</h2>\n <Button \n @click=\"$router.push({ name: 'track-create' })\"\n class=\"bg-main radius-small pd-small hover:scale-[1.05]\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n Upload Track\n </Button>\n </div>\n \n <Feed\n :store=\"{\n read: (options) => tracksActions.fetchTracks({ ...options, owner: { type: 'user', target: authState.user._id } }),\n state: tracksState\n }\"\n :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n :states=\"{\n empty: {\n title: 'No tracks yet',\n description: 'Upload your first track to see it here',\n class: 'pd-big bg-white-transp-10 radius-medium'\n }\n }\"\n class=\"gap-regular\"\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\"\n :showAlbum=\"true\"\n :showCover=\"true\"\n />\n </div>\n </template>\n </Feed>\n </div>\n \n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { useRouter } from 'vue-router';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport PlaylistCard from '../cards/PlaylistCard.vue';\nimport ArtistCard from '../cards/ArtistCard.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\n\n// Import store modules\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { state as artistsState, actions as artistsActions } from '../../store/artists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\n\nconst router = useRouter();\n\n// State\nconst activeTab = ref('playlists');\n\n// Tabs configuration\nconst tabs = [\n { id: 'playlists', label: 'Playlists' },\n { id: 'albums', label: 'Albums' },\n { id: 'artists', label: 'Artists' },\n { id: 'tracks', label: 'Tracks' }\n];\n\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgNe,cAAS;AAGxB,UAAM,YAAY,IAAI,WAAW;AAGjC,UAAM,OAAO;AAAA,MACX,EAAE,IAAI,aAAa,OAAO,YAAW;AAAA,MACrC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,MAC/B,EAAE,IAAI,WAAW,OAAO,UAAS;AAAA,MACjC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}