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

@ozdao/martyrs 0.2.571 → 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 (818) hide show

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,9 +1,9 @@
 import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, Fragment, renderList, createBlock, withCtx, createTextVNode } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import _sfc_main$9 from "../../../../components/Button/Button.vue2.js";
-/* empty css                                        */
+/* empty css                                       */
 import Media from "../../../../components/Media/Media.vue.js";
-/* empty css                                            */
+/* empty css                                           */
 import _sfc_main$7 from "../../../../components/Feed/Feed.vue.js";
 import _sfc_main$a from "../../../../components/Popup/Popup.vue.js";
 import _sfc_main$1 from "../../../icons/navigation/IconPlay.vue.js";
@@ -32,7 +32,7 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = { class: "pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section" };
 const _hoisted_5 = { class: "cover-container relative mn-b-medium radius-big overflow-hidden shadow-big" };
-const _hoisted_6 = { class: "stats-grid grid cols-2 gap-small" };
+const _hoisted_6 = { class: "stats-grid d-grid cols-2 gap-small" };
 const _hoisted_7 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
 const _hoisted_8 = { class: "mn-b-thin" };
 const _hoisted_9 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
@@ -41,11 +41,11 @@ const _hoisted_11 = { class: "playlist-details-section" };
 const _hoisted_12 = { class: "flex items-center gap-small mn-b-small" };
 const _hoisted_13 = {
   key: 0,
-  class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase"
+  class: "bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase"
 };
 const _hoisted_14 = {
   key: 1,
-  class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase"
+  class: "bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase"
 };
 const _hoisted_15 = { class: "h1 mn-b-medium" };
 const _hoisted_16 = { class: "artists-section mn-b-medium" };
@@ -56,15 +56,15 @@ const _hoisted_18 = {
 };
 const _hoisted_19 = { class: "flex flex-wrap gap-small" };
 const _hoisted_20 = { class: "t-small" };
-const _hoisted_21 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_21 = { class: "metadata-grid d-grid cols-2 gap-small mn-b-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_23 = { class: "fw-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_25 = { class: "fw-medium" };
 const _hoisted_26 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_27 = { class: "t-medium" };
+const _hoisted_27 = { class: "fw-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_29 = { class: "fw-medium" };
 const _hoisted_30 = {
   key: 1,
   class: "tags-section mn-b-medium"
@@ -90,7 +90,7 @@ const _hoisted_38 = {
   class: "more-playlists-section mn-t-big"
 };
 const _hoisted_39 = { class: "flex justify-between items-center mn-b-medium" };
-const _hoisted_40 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide" };
+const _hoisted_40 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-x-contain scroll-smooth scroll-snap-x-mandatory scroll-hide" };
 const _hoisted_41 = { class: "t-transp mn-b-medium" };
 const _hoisted_42 = { class: "flex justify-end gap-small" };
 const _sfc_main = {
@@ -330,7 +330,7 @@ const _sfc_main = {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         hasLoaded.value && !playlist.value ? (openBlock(), createElementBlock("div", _hoisted_2, _cache[6] || (_cache[6] = [
           createElementVNode("h2", { class: "" }, "Playlist not found", -1),
-          createElementVNode("p", { class: "t-transp t-medium" }, "The playlist you're looking for doesn't exist or has been removed.", -1)
+          createElementVNode("p", { class: "t-transp fw-medium" }, "The playlist you're looking for doesn't exist or has been removed.", -1)
         ]))) : createCommentVNode("", true),
         playlist.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
           createElementVNode("div", _hoisted_4, [
@@ -354,14 +354,14 @@ const _sfc_main = {
           ]),
           createElementVNode("div", _hoisted_11, [
             createElementVNode("div", _hoisted_12, [
-              _cache[9] || (_cache[9] = createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, " Playlist ", -1)),
+              _cache[9] || (_cache[9] = createElementVNode("span", { class: "bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase" }, " Playlist ", -1)),
               playlist.value.isCollaborative ? (openBlock(), createElementBlock("span", _hoisted_13, " Collaborative ")) : createCommentVNode("", true),
               playlist.value.status === "published" ? (openBlock(), createElementBlock("span", _hoisted_14, " Published ")) : createCommentVNode("", true)
             ]),
             createElementVNode("h1", _hoisted_15, toDisplayString(playlist.value.title), 1),
             createVNode(_sfc_main$3, { buttons: actionButtons.value }, null, 8, ["buttons"]),
             createElementVNode("div", _hoisted_16, [
-              _cache[10] || (_cache[10] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Created by", -1)),
+              _cache[10] || (_cache[10] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "Created by", -1)),
               createElementVNode("div", _hoisted_17, [
                 createVNode(ArtistCardSmall, {
                   artist: {
@@ -378,7 +378,7 @@ const _sfc_main = {
               ])
             ]),
             playlist.value.collaborators && playlist.value.collaborators.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_18, [
-              _cache[11] || (_cache[11] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Collaborators", -1)),
+              _cache[11] || (_cache[11] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "Collaborators", -1)),
               createElementVNode("div", _hoisted_19, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(playlist.value.collaborators, (collaborator) => {
                   return openBlock(), createElementBlock("div", {
@@ -395,31 +395,31 @@ const _sfc_main = {
                 }), 128))
               ])
             ])) : createCommentVNode("", true),
-            _cache[18] || (_cache[18] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
+            _cache[18] || (_cache[18] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "Metadata", -1)),
             createElementVNode("div", _hoisted_21, [
               createElementVNode("div", _hoisted_22, [
-                createVNode(_sfc_main$4, { class: "i-medium t-primary" }),
+                createVNode(_sfc_main$4, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[12] || (_cache[12] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Created", -1)),
                   createElementVNode("div", _hoisted_23, toDisplayString(formatDate(playlist.value.createdAt)), 1)
                 ])
               ]),
               createElementVNode("div", _hoisted_24, [
-                createVNode(IconTime, { class: "i-medium t-primary" }),
+                createVNode(IconTime, { class: "i-medium t-main" }),
                 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)
                 ])
               ]),
               createElementVNode("div", _hoisted_26, [
-                createVNode(_sfc_main$5, { class: "i-medium t-primary" }),
+                createVNode(_sfc_main$5, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[14] || (_cache[14] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Updated", -1)),
                   createElementVNode("div", _hoisted_27, toDisplayString(formatDate(playlist.value.updatedAt)), 1)
                 ])
               ]),
               createElementVNode("div", _hoisted_28, [
-                createVNode(_sfc_main$6, { class: "i-medium t-primary" }),
+                createVNode(_sfc_main$6, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[15] || (_cache[15] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
                   createElementVNode("div", _hoisted_29, toDisplayString(playlist.value.isPublic ? "Public" : "Private"), 1)
@@ -427,18 +427,18 @@ const _sfc_main = {
               ])
             ]),
             playlist.value.tags && playlist.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_30, [
-              _cache[16] || (_cache[16] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Tags", -1)),
+              _cache[16] || (_cache[16] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "Tags", -1)),
               createElementVNode("div", _hoisted_31, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(playlist.value.tags, (tag) => {
                   return openBlock(), createElementBlock("span", {
                     key: tag,
-                    class: "tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
+                    class: "tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
                   }, " #" + toDisplayString(tag), 1);
                 }), 128))
               ])
             ])) : createCommentVNode("", true),
             playlist.value.description ? (openBlock(), createElementBlock("div", _hoisted_32, [
-              _cache[17] || (_cache[17] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
+              _cache[17] || (_cache[17] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "About", -1)),
               createElementVNode("p", _hoisted_33, toDisplayString(playlist.value.description), 1)
             ])) : createCommentVNode("", true)
           ])
@@ -480,7 +480,7 @@ const _sfc_main = {
         ])) : !_ctx.isLoading && playlist.value && !playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_36, [
           createElementVNode("div", _hoisted_37, [
             _cache[21] || (_cache[21] = createElementVNode("h3", { class: "mn-b-small" }, "This playlist is empty", -1)),
-            _cache[22] || (_cache[22] = createElementVNode("p", { class: "t-transp t-medium mn-b-medium" }, "Add some tracks to get started", -1)),
+            _cache[22] || (_cache[22] = createElementVNode("p", { class: "t-transp fw-medium mn-b-medium" }, "Add some tracks to get started", -1)),
             isOwner.value || isCollaborator.value ? (openBlock(), createBlock(_sfc_main$9, {
               key: 0,
               onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$router.push({ name: "music-search" })),
@@ -500,7 +500,7 @@ const _sfc_main = {
             playlist.value.creator ? (openBlock(), createBlock(_component_router_link, {
               key: 0,
               to: getOwnerProfileLink(playlist.value.creator),
-              class: "t-primary hover-opacity"
+              class: "t-main hover:opacity-70"
             }, {
               default: withCtx(() => _cache[23] || (_cache[23] = [
                 createTextVNode(" See all ")
@@ -512,11 +512,11 @@ const _sfc_main = {
             (openBlock(true), createElementBlock(Fragment, null, renderList(morePlaylists.value, (relatedPlaylist) => {
               return openBlock(), createElementBlock("li", {
                 key: relatedPlaylist._id,
-                class: "flex-none scroll-snap-align-start"
+                class: "flex-none scroll-snap-start"
               }, [
                 createVNode(PlaylistCard, {
                   playlist: relatedPlaylist,
-                  class: "w-min-15r transition-cubic-in-out"
+                  class: "w-min-15r ease-cubic-in-out"
                 }, null, 8, ["playlist"])
               ]);
             }), 128))

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Playlist.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<template>\n <div class=\"playlist-page pd-small\">\n <!-- Not Found -->\n <div v-if=\"hasLoaded && !playlist\" class=\"t-center pd-big\">\n <h2 class=\"\">Playlist not found</h2>\n <p class=\"t-transp t-medium\">The playlist you're looking for doesn't exist or has been removed.</p>\n </div>\n \n <!-- Playlist Content -->\n <div v-if=\"playlist\" class=\"playlist-content cols-2 mobile:cols-1 gap-big\">\n <!-- Left Column - Cover & Stats -->\n <div class=\"pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section\">\n <!-- Cover -->\n <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n <Media \n :url=\"playlist.coverUrl \|\| '/assets/placeholder-playlist.jpg'\"\n :alt=\"playlist.title\"\n class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n />\n </div>\n\n <!-- Quick Stats -->\n <div class=\"stats-grid grid cols-2 gap-small\">\n <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n <div class=\" mn-b-thin\">{{ playlistTracks.length }}</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(playlist.followers \|\| 0) }}</div>\n <div class=\"t-small t-transp t-uppercase\">Followers</div>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Playlist Details -->\n <div class=\"playlist-details-section\">\n <!-- Playlist 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 Playlist\n </span>\n <span v-if=\"playlist.isCollaborative\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n Collaborative\n </span>\n <span v-if=\"playlist.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n Published\n </span>\n </div>\n\n <!-- Playlist Title -->\n <h1 class=\"h1 mn-b-medium\">{{ playlist.title }}</h1>\n\n <!-- Action Buttons -->\n <ActionButtons :buttons=\"actionButtons\" />\n\n <div class=\"artists-section mn-b-medium\">\n <h3 class=\"t-medium mn-b-small\">Created by</h3>\n <div class=\"flex flex-column gap-small\">\n <ArtistCardSmall \n :artist=\"{\n _id: playlist.creator.target,\n to: { name: 'User Profile', params: { _id: playlist.creator.target } },\n photoUrl: null,\n name: playlist.creator.target,\n isVerified: false\n }\"\n :is-following=\"followedUsers.includes(playlist.creator.target)\"\n :show-follow-button=\"!isOwner\"\n @toggle-follow=\"toggleFollowUser(playlist.creator.target)\"\n />\n </div>\n </div>\n\n <!-- Collaborators -->\n <div v-if=\"playlist.collaborators && playlist.collaborators.length > 0\" class=\"collaborators-section mn-b-big\">\n <h3 class=\"t-medium mn-b-small\">Collaborators</h3>\n <div class=\"flex flex-wrap gap-small\">\n <div \n v-for=\"collaborator in playlist.collaborators\"\n :key=\"collaborator._id \|\| collaborator\"\n class=\"collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin\"\n >\n <Media \n v-if=\"collaborator.photoUrl\"\n :url=\"collaborator.photoUrl\"\n class=\"i-medium radius-full object-cover\"\n />\n <span class=\"t-small\">{{ collaborator.name \|\| collaborator.profile?.name \|\| 'User' }}</span>\n </div>\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 <!-- Created 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\">Created</div>\n <div class=\"t-medium \">{{ formatDate(playlist.createdAt) }}</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 <!-- Updated Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n <IconRefresh class=\"i-medium t-primary\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Updated</div>\n <div class=\"t-medium \">{{ formatDate(playlist.updatedAt) }}</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 \">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>\n </div>\n </div>\n </div>\n\n <!-- Tags -->\n <div v-if=\"playlist.tags && playlist.tags.length\" class=\"tags-section mn-b-medium\">\n <h3 class=\"t-medium mn-b-small\">Tags</h3>\n <div class=\"flex gap-thin flex-wrap\">\n <span \n v-for=\"tag in playlist.tags\" \n :key=\"tag\"\n class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n >\n #{{ tag }}\n </span>\n </div>\n </div>\n\n <!-- Description -->\n <div v-if=\"playlist.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n <h3 class=\"t-medium mn-b-small\">About</h3>\n <p class=\"t-transp\">{{ playlist.description }}</p>\n </div>\n </div>\n </div>\n\n <!-- Playlist Tracks -->\n <section v-if=\"!isLoading && playlist && playlistTracks.length\" class=\"tracks-section mn-t-big\">\n <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n <Feed\n :store=\"{\n read: () => Promise.resolve(playlistTracks),\n state: { isLoading: false }\n }\"\n :external=\"true\"\n :items=\"playlistTracks\"\n :states=\"{\n empty: {\n title: 'No tracks in playlist',\n description: 'Add some tracks to get started',\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=\"true\"\n :showCover=\"true\"\n :canRemove=\"isOwner \|\| isCollaborator\"\n @remove=\"() => removeTrack(track._id)\"\n />\n </div>\n </template>\n </Feed>\n </section>\n\n <!-- Empty State -->\n <section v-else-if=\"!isLoading && playlist && !playlistTracks.length\" class=\"empty-section mn-t-big\">\n <div class=\"empty-tracks t-center pd-big bg-light radius-medium\">\n <h3 class=\" mn-b-small\">This playlist is empty</h3>\n <p class=\"t-transp t-medium mn-b-medium\">Add some tracks to get started</p>\n \n <Button \n v-if=\"isOwner \|\| isCollaborator\"\n @click=\"$router.push({ name: 'music-search' })\"\n color=\"primary\"\n size=\"medium\"\n >\n Find Tracks\n </Button>\n </div>\n </section>\n\n <!-- More Playlists -->\n <section v-if=\"!isLoading && playlist && morePlaylists.length\" class=\"more-playlists-section mn-t-big\">\n <div class=\"flex justify-between items-center mn-b-medium\">\n <h2 class=\"h2\">More Playlists</h2>\n <router-link \n v-if=\"playlist.creator\"\n :to=\"getOwnerProfileLink(playlist.creator)\" \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 <li v-for=\"relatedPlaylist in morePlaylists\" :key=\"relatedPlaylist._id\" class=\"flex-none scroll-snap-align-start\">\n <PlaylistCard :playlist=\"relatedPlaylist\" class=\"w-min-15r transition-cubic-in-out\" />\n </li>\n </div>\n </section>\n\n <!-- Edit Playlist Modal -->\n <Popup \n :isPopupOpen=\"showEditModal && (isOwner \|\| isCollaborator)\"\n @close-popup=\"showEditModal = false\" \n class=\"bg-white pd-medium w-m-30r radius-medium\"\n >\n <PlaylistForm \n :editMode=\"true\"\n :url=\"playlist.url\"\n @cancel=\"showEditModal = false\"\n @updated=\"handlePlaylistUpdated\"\n />\n </Popup>\n\n <!-- Delete Confirmation Modal -->\n <Popup \n :isPopupOpen=\"showDeleteModal\"\n @close-popup=\"showDeleteModal = false\" \n class=\"bg-white pd-medium w-m-25r radius-medium\"\n >\n <h3 class=\"mn-b-medium\">Delete Playlist</h3>\n <p class=\"t-transp mn-b-medium\">Are you sure you want to delete \"{{ playlist.title }}\"? This action cannot be undone.</p>\n \n <div class=\"flex justify-end gap-small\">\n <Button \n @click=\"showDeleteModal = false\"\n color=\"transp\"\n size=\"medium\"\n >\n Cancel\n </Button>\n \n <Button \n @click=\"confirmDelete\"\n color=\"danger\"\n size=\"medium\"\n >\n Delete Playlist\n </Button>\n </div>\n </Popup>\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';\nimport Popup from '@martyrs/src/components/Popup/Popup.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 IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.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 PlaylistCard from '../cards/PlaylistCard.vue';\nimport PlaylistForm from '../forms/PlaylistForm.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } 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\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst isFollowing = ref(false);\nconst showEditModal = ref(false);\nconst showDeleteModal = ref(false);\nconst followedUsers = ref([]);\nconst morePlaylists = ref([]);\n\n// Clear state\nplaylistsState.currentPlaylist = null;\nplaylistsState.currentPlaylistTracks = [];\n\n// Computed\nconst playlist = computed(() => playlistsState.currentPlaylist);\nconst playlistTracks = computed(() => playlistsState.currentPlaylistTracks \|\| []);\n\nconst isOwner = computed(() => {\n if (!playlist.value \|\| !authState.user) return false;\n \n const ownerId = playlist.value.owner?.target?._id \|\| playlist.value.owner?.target;\n return ownerId === authState.user._id;\n});\n\nconst isCollaborator = computed(() => {\n if (!playlist.value \|\| !authState.user) return false;\n \n return playlist.value.collaborators?.some(collab => \n (collab._id \|\| collab) === authState.user._id\n );\n});\n\nconst totalDuration = computed(() => {\n if (!playlistTracks.value.length) return '0:00';\n const totalSeconds = playlistTracks.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: playPlaylist\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: null,\n text: isFollowing.value ? 'Unfollow' : 'Follow',\n action: toggleFollow\n },\n {\n type: 'dropdown',\n items: [\n { text: 'Add to Queue', action: addToQueue, class: 't-nowrap' },\n { text: 'Copy Link', action: copyLink, class: 't-nowrap' }\n ]\n }\n ];\n\n if (isOwner.value \|\| isCollaborator.value) {\n const items = buttons[3].items;\n items.push({ separator: true });\n items.push({ text: 'Edit Playlist', action: editPlaylist, class: 't-nowrap' });\n\n if (isOwner.value) {\n items.push({\n text: playlist.value?.isCollaborative ? 'Make Private' : 'Make Collaborative',\n action: toggleCollaborative,\n class: 't-nowrap'\n });\n items.push({\n text: 'Delete Playlist',\n action: deletePlaylist,\n color: 'danger',\n class: 't-nowrap'\n });\n }\n }\n\n return buttons;\n});\n\n// Helper functions\nconst getOwnerData = (playlist) => {\n if (!playlist) return null;\n const owner = playlist.creator?.target \|\| playlist.owner?.target;\n return typeof owner === 'object' ? owner : null;\n};\n\nconst getOwnerId = (playlist) => {\n if (!playlist) return null;\n const owner = playlist.creator?.target \|\| playlist.owner?.target;\n return typeof owner === 'object' ? owner._id : owner;\n};\n\nconst getPlaylistOwnerName = (playlist) => {\n if (!playlist) return 'Unknown';\n \n const owner = getOwnerData(playlist);\n if (owner) {\n return owner.profile?.name \|\| owner.name \|\| 'Unknown';\n }\n \n return 'Unknown';\n};\n\nconst getOwnerProfileLink = (owner) => {\n if (!owner \|\| !owner.target) return { name: 'music-home' };\n \n const targetId = typeof owner.target === 'object' ? owner.target._id : owner.target;\n \n if (owner.type === 'user' \|\| owner.type === 'User') {\n return { name: 'User Profile', params: { _id: targetId } };\n } else if (owner.type === 'organization' \|\| owner.type === 'Organization') {\n return { name: 'Organizatio', params: { _id: targetId } };\n }\n \n return { name: 'music-home' };\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 playPlaylist = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n playerActions.setQueue(playlistTracks.value);\n }\n};\n\nconst shufflePlay = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);\n playerActions.setQueue(shuffled);\n }\n};\n\nconst toggleFollow = async () => {\n isFollowing.value = !isFollowing.value;\n // TODO: Implement actual following\n try {\n if (isFollowing.value) {\n await playlistsActions.followPlaylist(playlist.value._id);\n } else {\n await playlistsActions.unfollowPlaylist(playlist.value._id);\n }\n } catch (error) {\n console.error('Error toggling follow:', error);\n isFollowing.value = !isFollowing.value; // Revert on error\n }\n};\n\nconst toggleFollowUser = (userId) => {\n const index = followedUsers.value.indexOf(userId);\n if (index > -1) {\n followedUsers.value.splice(index, 1);\n } else {\n followedUsers.value.push(userId);\n }\n // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n playlistTracks.value.forEach(track => {\n playerActions.addToQueue(track);\n });\n }\n};\n\nconst editPlaylist = () => {\n showEditModal.value = true;\n};\n\nconst toggleCollaborative = async () => {\n try {\n const updatedData = {\n _id: playlist.value._id,\n isCollaborative: !playlist.value.isCollaborative\n };\n\n await playlistsActions.updatePlaylist(updatedData);\n } catch (error) {\n console.error('Error updating playlist:', error);\n }\n};\n\nconst deletePlaylist = () => {\n showDeleteModal.value = true;\n};\n\nconst confirmDelete = async () => {\n try {\n await playlistsActions.deletePlaylist(playlist.value._id);\n router.push({ name: 'music-library' });\n } catch (error) {\n console.error('Error deleting playlist:', error);\n store.core.actions.setError({\n message: 'Failed to delete playlist'\n });\n }\n};\n\nconst removeTrack = async (trackId) => {\n try {\n await playlistsActions.removeTrackFromPlaylist(playlist.value._id, trackId);\n // Refresh playlist data\n await fetchPlaylistData();\n } catch (error) {\n console.error('Error removing track:', error);\n store.core.actions.setError({\n message: 'Failed to remove track'\n });\n }\n};\n\nconst copyLink = () => {\n navigator.clipboard.writeText(window.location.href);\n};\n\nconst handlePlaylistUpdated = () => {\n showEditModal.value = false;\n fetchPlaylistData();\n};\n\n// Data fetching\nconst fetchPlaylistData = async () => {\n try {\n await playlistsActions.fetchPlaylistByUrl(route.params.url);\n \n // Check if following\n if (authState.user && playlist.value) {\n // TODO: Check if user is following this playlist\n }\n \n // Fetch more playlists from the same creator\n if (playlist.value?.creator?.target) {\n const creatorId = typeof playlist.value.creator.target === 'object' \n ? playlist.value.creator.target._id \n : playlist.value.creator.target;\n \n const playlists = await playlistsActions.fetchPlaylists({\n 'creator.target': creatorId,\n isPublic: true,\n limit: 6\n });\n \n // Filter out current playlist\n morePlaylists.value = playlists.filter(p => p._id !== playlist.value._id).slice(0, 5);\n }\n } catch (error) {\n console.error('Error fetching playlist data:', error);\n }\n};\n\n// Lifecycle\nonMounted(async () => {\n emits('page-loading');\n \n await fetchPlaylistData();\n \n hasLoaded.value = true;\n emits('page-loaded');\n});\n</script>\n"],"names":["playlistsState","authState","IconPlay","IconShuffle","playerActions","playlistsActions"],"mappings":"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"}
1	+ {"version":3,"file":"Playlist.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<template>\n <div class=\"playlist-page pd-small\">\n <!-- Not Found -->\n <div v-if=\"hasLoaded && !playlist\" class=\"t-center pd-big\">\n <h2 class=\"\">Playlist not found</h2>\n <p class=\"t-transp fw-medium\">The playlist you're looking for doesn't exist or has been removed.</p>\n </div>\n \n <!-- Playlist Content -->\n <div v-if=\"playlist\" class=\"playlist-content cols-2 mobile:cols-1 gap-big\">\n <!-- Left Column - Cover & Stats -->\n <div class=\"pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section\">\n <!-- Cover -->\n <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n <Media \n :url=\"playlist.coverUrl \|\| '/assets/placeholder-playlist.jpg'\"\n :alt=\"playlist.title\"\n class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n />\n </div>\n\n <!-- Quick Stats -->\n <div class=\"stats-grid d-grid cols-2 gap-small\">\n <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n <div class=\" mn-b-thin\">{{ playlistTracks.length }}</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(playlist.followers \|\| 0) }}</div>\n <div class=\"t-small t-transp t-uppercase\">Followers</div>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Playlist Details -->\n <div class=\"playlist-details-section\">\n <!-- Playlist 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 Playlist\n </span>\n <span v-if=\"playlist.isCollaborative\" class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n Collaborative\n </span>\n <span v-if=\"playlist.status === 'published'\" class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n Published\n </span>\n </div>\n\n <!-- Playlist Title -->\n <h1 class=\"h1 mn-b-medium\">{{ playlist.title }}</h1>\n\n <!-- Action Buttons -->\n <ActionButtons :buttons=\"actionButtons\" />\n\n <div class=\"artists-section mn-b-medium\">\n <h3 class=\"fw-medium mn-b-small\">Created by</h3>\n <div class=\"flex flex-column gap-small\">\n <ArtistCardSmall \n :artist=\"{\n _id: playlist.creator.target,\n to: { name: 'User Profile', params: { _id: playlist.creator.target } },\n photoUrl: null,\n name: playlist.creator.target,\n isVerified: false\n }\"\n :is-following=\"followedUsers.includes(playlist.creator.target)\"\n :show-follow-button=\"!isOwner\"\n @toggle-follow=\"toggleFollowUser(playlist.creator.target)\"\n />\n </div>\n </div>\n\n <!-- Collaborators -->\n <div v-if=\"playlist.collaborators && playlist.collaborators.length > 0\" class=\"collaborators-section mn-b-big\">\n <h3 class=\"fw-medium mn-b-small\">Collaborators</h3>\n <div class=\"flex flex-wrap gap-small\">\n <div \n v-for=\"collaborator in playlist.collaborators\"\n :key=\"collaborator._id \|\| collaborator\"\n class=\"collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin\"\n >\n <Media \n v-if=\"collaborator.photoUrl\"\n :url=\"collaborator.photoUrl\"\n class=\"i-medium radius-full object-cover\"\n />\n <span class=\"t-small\">{{ collaborator.name \|\| collaborator.profile?.name \|\| 'User' }}</span>\n </div>\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 gap-small mn-b-medium\">\n <!-- Created 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\">Created</div>\n <div class=\"fw-medium \">{{ formatDate(playlist.createdAt) }}</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 <!-- Updated Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n <IconRefresh class=\"i-medium t-main\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Updated</div>\n <div class=\"fw-medium \">{{ formatDate(playlist.updatedAt) }}</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 \">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>\n </div>\n </div>\n </div>\n\n <!-- Tags -->\n <div v-if=\"playlist.tags && playlist.tags.length\" class=\"tags-section mn-b-medium\">\n <h3 class=\"fw-medium mn-b-small\">Tags</h3>\n <div class=\"flex gap-thin flex-wrap\">\n <span \n v-for=\"tag in playlist.tags\" \n :key=\"tag\"\n class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer\"\n >\n #{{ tag }}\n </span>\n </div>\n </div>\n\n <!-- Description -->\n <div v-if=\"playlist.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n <h3 class=\"fw-medium mn-b-small\">About</h3>\n <p class=\"t-transp\">{{ playlist.description }}</p>\n </div>\n </div>\n </div>\n\n <!-- Playlist Tracks -->\n <section v-if=\"!isLoading && playlist && playlistTracks.length\" class=\"tracks-section mn-t-big\">\n <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n <Feed\n :store=\"{\n read: () => Promise.resolve(playlistTracks),\n state: { isLoading: false }\n }\"\n :external=\"true\"\n :items=\"playlistTracks\"\n :states=\"{\n empty: {\n title: 'No tracks in playlist',\n description: 'Add some tracks to get started',\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=\"true\"\n :showCover=\"true\"\n :canRemove=\"isOwner \|\| isCollaborator\"\n @remove=\"() => removeTrack(track._id)\"\n />\n </div>\n </template>\n </Feed>\n </section>\n\n <!-- Empty State -->\n <section v-else-if=\"!isLoading && playlist && !playlistTracks.length\" class=\"empty-section mn-t-big\">\n <div class=\"empty-tracks t-center pd-big bg-light radius-medium\">\n <h3 class=\" mn-b-small\">This playlist is empty</h3>\n <p class=\"t-transp fw-medium mn-b-medium\">Add some tracks to get started</p>\n \n <Button \n v-if=\"isOwner \|\| isCollaborator\"\n @click=\"$router.push({ name: 'music-search' })\"\n color=\"primary\"\n size=\"medium\"\n >\n Find Tracks\n </Button>\n </div>\n </section>\n\n <!-- More Playlists -->\n <section v-if=\"!isLoading && playlist && morePlaylists.length\" class=\"more-playlists-section mn-t-big\">\n <div class=\"flex justify-between items-center mn-b-medium\">\n <h2 class=\"h2\">More Playlists</h2>\n <router-link \n v-if=\"playlist.creator\"\n :to=\"getOwnerProfileLink(playlist.creator)\" \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 <li v-for=\"relatedPlaylist in morePlaylists\" :key=\"relatedPlaylist._id\" class=\"flex-none scroll-snap-start\">\n <PlaylistCard :playlist=\"relatedPlaylist\" class=\"w-min-15r ease-cubic-in-out\" />\n </li>\n </div>\n </section>\n\n <!-- Edit Playlist Modal -->\n <Popup \n :isPopupOpen=\"showEditModal && (isOwner \|\| isCollaborator)\"\n @close-popup=\"showEditModal = false\" \n class=\"bg-white pd-medium w-m-30r radius-medium\"\n >\n <PlaylistForm \n :editMode=\"true\"\n :url=\"playlist.url\"\n @cancel=\"showEditModal = false\"\n @updated=\"handlePlaylistUpdated\"\n />\n </Popup>\n\n <!-- Delete Confirmation Modal -->\n <Popup \n :isPopupOpen=\"showDeleteModal\"\n @close-popup=\"showDeleteModal = false\" \n class=\"bg-white pd-medium w-m-25r radius-medium\"\n >\n <h3 class=\"mn-b-medium\">Delete Playlist</h3>\n <p class=\"t-transp mn-b-medium\">Are you sure you want to delete \"{{ playlist.title }}\"? This action cannot be undone.</p>\n \n <div class=\"flex justify-end gap-small\">\n <Button \n @click=\"showDeleteModal = false\"\n color=\"transp\"\n size=\"medium\"\n >\n Cancel\n </Button>\n \n <Button \n @click=\"confirmDelete\"\n color=\"danger\"\n size=\"medium\"\n >\n Delete Playlist\n </Button>\n </div>\n </Popup>\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';\nimport Popup from '@martyrs/src/components/Popup/Popup.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 IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.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 PlaylistCard from '../cards/PlaylistCard.vue';\nimport PlaylistForm from '../forms/PlaylistForm.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } 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\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst isFollowing = ref(false);\nconst showEditModal = ref(false);\nconst showDeleteModal = ref(false);\nconst followedUsers = ref([]);\nconst morePlaylists = ref([]);\n\n// Clear state\nplaylistsState.currentPlaylist = null;\nplaylistsState.currentPlaylistTracks = [];\n\n// Computed\nconst playlist = computed(() => playlistsState.currentPlaylist);\nconst playlistTracks = computed(() => playlistsState.currentPlaylistTracks \|\| []);\n\nconst isOwner = computed(() => {\n if (!playlist.value \|\| !authState.user) return false;\n \n const ownerId = playlist.value.owner?.target?._id \|\| playlist.value.owner?.target;\n return ownerId === authState.user._id;\n});\n\nconst isCollaborator = computed(() => {\n if (!playlist.value \|\| !authState.user) return false;\n \n return playlist.value.collaborators?.some(collab => \n (collab._id \|\| collab) === authState.user._id\n );\n});\n\nconst totalDuration = computed(() => {\n if (!playlistTracks.value.length) return '0:00';\n const totalSeconds = playlistTracks.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: playPlaylist\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: null,\n text: isFollowing.value ? 'Unfollow' : 'Follow',\n action: toggleFollow\n },\n {\n type: 'dropdown',\n items: [\n { text: 'Add to Queue', action: addToQueue, class: 't-nowrap' },\n { text: 'Copy Link', action: copyLink, class: 't-nowrap' }\n ]\n }\n ];\n\n if (isOwner.value \|\| isCollaborator.value) {\n const items = buttons[3].items;\n items.push({ separator: true });\n items.push({ text: 'Edit Playlist', action: editPlaylist, class: 't-nowrap' });\n\n if (isOwner.value) {\n items.push({\n text: playlist.value?.isCollaborative ? 'Make Private' : 'Make Collaborative',\n action: toggleCollaborative,\n class: 't-nowrap'\n });\n items.push({\n text: 'Delete Playlist',\n action: deletePlaylist,\n color: 'danger',\n class: 't-nowrap'\n });\n }\n }\n\n return buttons;\n});\n\n// Helper functions\nconst getOwnerData = (playlist) => {\n if (!playlist) return null;\n const owner = playlist.creator?.target \|\| playlist.owner?.target;\n return typeof owner === 'object' ? owner : null;\n};\n\nconst getOwnerId = (playlist) => {\n if (!playlist) return null;\n const owner = playlist.creator?.target \|\| playlist.owner?.target;\n return typeof owner === 'object' ? owner._id : owner;\n};\n\nconst getPlaylistOwnerName = (playlist) => {\n if (!playlist) return 'Unknown';\n \n const owner = getOwnerData(playlist);\n if (owner) {\n return owner.profile?.name \|\| owner.name \|\| 'Unknown';\n }\n \n return 'Unknown';\n};\n\nconst getOwnerProfileLink = (owner) => {\n if (!owner \|\| !owner.target) return { name: 'music-home' };\n \n const targetId = typeof owner.target === 'object' ? owner.target._id : owner.target;\n \n if (owner.type === 'user' \|\| owner.type === 'User') {\n return { name: 'User Profile', params: { _id: targetId } };\n } else if (owner.type === 'organization' \|\| owner.type === 'Organization') {\n return { name: 'Organizatio', params: { _id: targetId } };\n }\n \n return { name: 'music-home' };\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 playPlaylist = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n playerActions.setQueue(playlistTracks.value);\n }\n};\n\nconst shufflePlay = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);\n playerActions.setQueue(shuffled);\n }\n};\n\nconst toggleFollow = async () => {\n isFollowing.value = !isFollowing.value;\n // TODO: Implement actual following\n try {\n if (isFollowing.value) {\n await playlistsActions.followPlaylist(playlist.value._id);\n } else {\n await playlistsActions.unfollowPlaylist(playlist.value._id);\n }\n } catch (error) {\n console.error('Error toggling follow:', error);\n isFollowing.value = !isFollowing.value; // Revert on error\n }\n};\n\nconst toggleFollowUser = (userId) => {\n const index = followedUsers.value.indexOf(userId);\n if (index > -1) {\n followedUsers.value.splice(index, 1);\n } else {\n followedUsers.value.push(userId);\n }\n // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n playlistTracks.value.forEach(track => {\n playerActions.addToQueue(track);\n });\n }\n};\n\nconst editPlaylist = () => {\n showEditModal.value = true;\n};\n\nconst toggleCollaborative = async () => {\n try {\n const updatedData = {\n _id: playlist.value._id,\n isCollaborative: !playlist.value.isCollaborative\n };\n\n await playlistsActions.updatePlaylist(updatedData);\n } catch (error) {\n console.error('Error updating playlist:', error);\n }\n};\n\nconst deletePlaylist = () => {\n showDeleteModal.value = true;\n};\n\nconst confirmDelete = async () => {\n try {\n await playlistsActions.deletePlaylist(playlist.value._id);\n router.push({ name: 'music-library' });\n } catch (error) {\n console.error('Error deleting playlist:', error);\n store.core.actions.setError({\n message: 'Failed to delete playlist'\n });\n }\n};\n\nconst removeTrack = async (trackId) => {\n try {\n await playlistsActions.removeTrackFromPlaylist(playlist.value._id, trackId);\n // Refresh playlist data\n await fetchPlaylistData();\n } catch (error) {\n console.error('Error removing track:', error);\n store.core.actions.setError({\n message: 'Failed to remove track'\n });\n }\n};\n\nconst copyLink = () => {\n navigator.clipboard.writeText(window.location.href);\n};\n\nconst handlePlaylistUpdated = () => {\n showEditModal.value = false;\n fetchPlaylistData();\n};\n\n// Data fetching\nconst fetchPlaylistData = async () => {\n try {\n await playlistsActions.fetchPlaylistByUrl(route.params.url);\n \n // Check if following\n if (authState.user && playlist.value) {\n // TODO: Check if user is following this playlist\n }\n \n // Fetch more playlists from the same creator\n if (playlist.value?.creator?.target) {\n const creatorId = typeof playlist.value.creator.target === 'object' \n ? playlist.value.creator.target._id \n : playlist.value.creator.target;\n \n const playlists = await playlistsActions.fetchPlaylists({\n 'creator.target': creatorId,\n isPublic: true,\n limit: 6\n });\n \n // Filter out current playlist\n morePlaylists.value = playlists.filter(p => p._id !== playlist.value._id).slice(0, 5);\n }\n } catch (error) {\n console.error('Error fetching playlist data:', error);\n }\n};\n\n// Lifecycle\nonMounted(async () => {\n emits('page-loading');\n \n await fetchPlaylistData();\n \n hasLoaded.value = true;\n emits('page-loaded');\n});\n</script>\n"],"names":["playlistsState","authState","IconPlay","IconShuffle","playerActions","playlistsActions"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ import AlbumCard from "../cards/AlbumCard.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
 import ArtistCard from "../cards/ArtistCard.vue.js";
 import _sfc_main$2 from "../../../../components/Button/Button.vue2.js";
-import Loader from "../../../../components/Loader/Loader.vue.js";
+import Loader from "../../../../components/Loader/Loader.vue2.js";
 import { state, actions } from "../../store/search.js";
 /* empty css                   */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
@@ -24,7 +24,7 @@ const _hoisted_5 = {
   key: 1,
   class: "search-error t-center pd-big"
 };
-const _hoisted_6 = { class: "t-fourth t-medium" };
+const _hoisted_6 = { class: "t-fourth fw-medium" };
 const _hoisted_7 = {
   key: 2,
   class: "search-empty t-center pd-big"
@@ -42,31 +42,31 @@ const _hoisted_11 = {
   key: 0,
   class: "search-section mn-b-medium"
 };
-const _hoisted_12 = { class: "flex-between flex mn-b-small" };
+const _hoisted_12 = { class: "flex-justify-between flex mn-b-small" };
 const _hoisted_13 = { class: "bg-light radius-medium o-hidden" };
 const _hoisted_14 = {
   key: 1,
   class: "search-section mn-b-medium"
 };
-const _hoisted_15 = { class: "flex-between flex mn-b-small" };
+const _hoisted_15 = { class: "flex-justify-between flex mn-b-small" };
 const _hoisted_16 = { class: "artists-grid cols-6 mobile:cols-3 gap-small" };
 const _hoisted_17 = {
   key: 2,
   class: "search-section mn-b-medium"
 };
-const _hoisted_18 = { class: "flex-between flex mn-b-small" };
+const _hoisted_18 = { class: "flex-justify-between flex mn-b-small" };
 const _hoisted_19 = { class: "albums-grid cols-5 mobile:cols-2 gap-small" };
 const _hoisted_20 = {
   key: 3,
   class: "search-section mn-b-medium"
 };
-const _hoisted_21 = { class: "flex-between flex mn-b-small" };
+const _hoisted_21 = { class: "flex-justify-between flex mn-b-small" };
 const _hoisted_22 = { class: "playlists-grid cols-5 mobile:cols-2 gap-small" };
 const _hoisted_23 = {
   key: 4,
   class: "search-section"
 };
-const _hoisted_24 = { class: "flex-between flex mn-b-small" };
+const _hoisted_24 = { class: "flex-justify-between flex mn-b-small" };
 const _hoisted_25 = { class: "genres-grid cols-4 mobile:cols-2 gap-small" };
 const _hoisted_26 = { class: "" };
 const _sfc_main = {
@@ -159,7 +159,7 @@ const _sfc_main = {
                 key: filter.id,
                 onClick: ($event) => setActiveFilter(filter.id),
                 class: normalizeClass([[
-                  filter.id === activeFilter.value ? "bg-white t-black" : "bg-white-transp-50 hover-bg-white"
+                  filter.id === activeFilter.value ? "bg-white t-black" : "bg-white-transp-50 hover:bg-white"
                 ], "radius-extra pd-small"]),
                 showLoader: false,
                 showSucces: false
@@ -178,10 +178,10 @@ const _sfc_main = {
           createElementVNode("p", _hoisted_6, toDisplayString(searchError.value), 1)
         ])) : !searchQuery.value ? (openBlock(), createElementBlock("div", _hoisted_7, _cache[6] || (_cache[6] = [
           createElementVNode("h2", { class: "mn-b-small" }, "Search for music", -1),
-          createElementVNode("p", { class: "t-transp t-medium" }, "Find your favorite songs, artists, albums, and playlists", -1)
+          createElementVNode("p", { class: "t-transp fw-medium" }, "Find your favorite songs, artists, albums, and playlists", -1)
         ]))) : !hasResults.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
           createElementVNode("h2", _hoisted_9, 'No results found for "' + toDisplayString(searchQuery.value) + '"', 1),
-          _cache[7] || (_cache[7] = createElementVNode("p", { class: "t-transp t-medium" }, "Please try different keywords or check your spelling", -1))
+          _cache[7] || (_cache[7] = createElementVNode("p", { class: "t-transp fw-medium" }, "Please try different keywords or check your spelling", -1))
         ])) : (openBlock(), createElementBlock("div", _hoisted_10, [
           (activeFilter.value === "all" || activeFilter.value === "tracks") && trackResults.value.length > 0 ? (openBlock(), createElementBlock("section", _hoisted_11, [
             createElementVNode("div", _hoisted_12, [
@@ -189,7 +189,7 @@ const _sfc_main = {
               trackResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
                 key: 0,
                 onClick: _cache[0] || (_cache[0] = ($event) => setActiveFilter("tracks")),
-                class: "t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin",
+                class: "t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin",
                 showLoader: false,
                 showSucces: false
               }, {
@@ -217,7 +217,7 @@ const _sfc_main = {
               artistResults.value.length > 6 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
                 key: 0,
                 onClick: _cache[1] || (_cache[1] = ($event) => setActiveFilter("artists")),
-                class: "t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin",
+                class: "t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin",
                 showLoader: false,
                 showSucces: false
               }, {
@@ -243,7 +243,7 @@ const _sfc_main = {
               albumResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
                 key: 0,
                 onClick: _cache[2] || (_cache[2] = ($event) => setActiveFilter("albums")),
-                class: "t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin",
+                class: "t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin",
                 showLoader: false,
                 showSucces: false
               }, {
@@ -269,7 +269,7 @@ const _sfc_main = {
               playlistResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
                 key: 0,
                 onClick: _cache[3] || (_cache[3] = ($event) => setActiveFilter("playlists")),
-                class: "t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin",
+                class: "t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin",
                 showLoader: false,
                 showSucces: false
               }, {
@@ -295,7 +295,7 @@ const _sfc_main = {
               genreResults.value.length > 4 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
                 key: 0,
                 onClick: _cache[4] || (_cache[4] = ($event) => setActiveFilter("genres")),
-                class: "t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin",
+                class: "t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin",
                 showLoader: false,
                 showSucces: false
               }, {
@@ -310,7 +310,7 @@ const _sfc_main = {
                 return openBlock(), createBlock(_component_router_link, {
                   key: genre._id,
                   to: { name: "genre-detail", params: { url: genre.url } },
-                  class: "genre-card bg-gradient-color pd-medium radius-medium t-center hover-scale-1 transition-cubic-in-out",
+                  class: "genre-card bg-gradient-color pd-medium radius-medium t-center hover:scale-[1.05] ease-cubic-in-out",
                   style: normalizeStyle({
                     "--gradient-color": getRandomGradient()
                   })
@@ -328,7 +328,7 @@ const _sfc_main = {
     };
   }
 };
-const SearchResults = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-eb0bfaca"]]);
+const SearchResults = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7925cce0"]]);
 export {
   SearchResults as default
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.vue.js","sources":["../../../../../../../src/modules/music/components/pages/SearchResults.vue"],"sourcesContent":["<!-- components/pages/SearchResults.vue -->\n<template>\n <div class=\"search-results-page pd-medium\">\n <div class=\"search-header mn-b-medium\">\n <h1 class=\"mn-b-small\">Search</h1>\n \n <BlockSearch \n :placeholder=\"'What do you want to listen to?'\"\n class=\"bg-light w-m-40r\"\n @search=\"handleSearch\"\n :autofocus=\"true\"\n />\n \n <div v-if=\"searchQuery\" class=\"search-filters flex gap-small mn-t-medium\">\n <Button \n v-for=\"filter in searchFilters\"\n :key=\"filter.id\"\n @click=\"setActiveFilter(filter.id)\"\n :class=\"[\n filter.id === activeFilter ? '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 {{ filter.label }}\n </Button>\n </div>\n </div>\n \n <div v-if=\"isLoading\" class=\"search-loading\">\n <Loader />\n </div>\n \n <div v-else-if=\"searchError\" class=\"search-error t-center pd-big\">\n <p class=\"t-fourth t-medium\">{{ searchError }}</p>\n </div>\n \n <div v-else-if=\"!searchQuery\" class=\"search-empty t-center pd-big\">\n <h2 class=\"mn-b-small\">Search for music</h2>\n <p class=\"t-transp t-medium\">Find your favorite songs, artists, albums, and playlists</p>\n </div>\n \n <div v-else-if=\"!hasResults\" class=\"search-no-results t-center pd-big\">\n <h2 class=\"mn-b-small\">No results found for \"{{ searchQuery }}\"</h2>\n <p class=\"t-transp t-medium\">Please try different keywords or check your spelling</p>\n </div>\n \n <div v-else class=\"search-results\">\n <!-- Songs Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'tracks') && trackResults.length > 0\" class=\"search-section mn-b-medium\">\n <div class=\"flex-between flex mn-b-small\">\n <h2 class=\"\">Songs</h2>\n <Button \n v-if=\"trackResults.length > 5 && activeFilter === 'all'\"\n @click=\"setActiveFilter('tracks')\"\n class=\"t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"bg-light radius-medium o-hidden\">\n <TrackListCard\n v-for=\"(track, index) in (activeFilter === 'all' ? trackResults.slice(0, 5) : trackResults)\"\n :key=\"track._id\"\n :track=\"track\"\n :index=\"index\"\n :showAlbum=\"true\"\n :showCover=\"true\"\n />\n </div>\n </section>\n \n <!-- Artists Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'artists') && artistResults.length > 0\" class=\"search-section mn-b-medium\">\n <div class=\"flex-between flex mn-b-small\">\n <h2 class=\"\">Artists</h2>\n <Button \n v-if=\"artistResults.length > 6 && activeFilter === 'all'\"\n @click=\"setActiveFilter('artists')\"\n class=\"t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"artists-grid cols-6 mobile:cols-3 gap-small\">\n <div v-for=\"artist in (activeFilter === 'all' ? artistResults.slice(0, 6) : artistResults)\" :key=\"artist._id\">\n <ArtistCard :artist=\"artist\" />\n </div>\n </div>\n </section>\n \n <!-- Albums Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'albums') && albumResults.length > 0\" class=\"search-section mn-b-medium\">\n <div class=\"flex-between flex mn-b-small\">\n <h2 class=\"\">Albums</h2>\n <Button \n v-if=\"albumResults.length > 5 && activeFilter === 'all'\"\n @click=\"setActiveFilter('albums')\"\n class=\"t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"albums-grid cols-5 mobile:cols-2 gap-small\">\n <div v-for=\"album in (activeFilter === 'all' ? albumResults.slice(0, 5) : albumResults)\" :key=\"album._id\">\n <AlbumCard :album=\"album\" />\n </div>\n </div>\n </section>\n \n <!-- Playlists Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'playlists') && playlistResults.length > 0\" class=\"search-section mn-b-medium\">\n <div class=\"flex-between flex mn-b-small\">\n <h2 class=\"\">Playlists</h2>\n <Button \n v-if=\"playlistResults.length > 5 && activeFilter === 'all'\"\n @click=\"setActiveFilter('playlists')\"\n class=\"t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"playlists-grid cols-5 mobile:cols-2 gap-small\">\n <div v-for=\"playlist in (activeFilter === 'all' ? playlistResults.slice(0, 5) : playlistResults)\" :key=\"playlist._id\">\n <PlaylistCard :playlist=\"playlist\" />\n </div>\n </div>\n </section>\n \n <!-- Genres Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'genres') && genreResults.length > 0\" class=\"search-section\">\n <div class=\"flex-between flex mn-b-small\">\n <h2 class=\"\">Genres</h2>\n <Button \n v-if=\"genreResults.length > 4 && activeFilter === 'all'\"\n @click=\"setActiveFilter('genres')\"\n class=\"t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"genres-grid cols-4 mobile:cols-2 gap-small\">\n <router-link \n v-for=\"genre in (activeFilter === 'all' ? genreResults.slice(0, 4) : genreResults)\" \n :key=\"genre._id\"\n :to=\"{ name: 'genre-detail', params: { url: genre.url } }\"\n class=\"genre-card bg-gradient-color pd-medium radius-medium t-center hover-scale-1 transition-cubic-in-out\"\n :style=\"{ \n '--gradient-color': getRandomGradient() \n }\"\n >\n <h3 class=\"\">{{ genre.name }}</h3>\n </router-link>\n </div>\n </section>\n </div>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.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';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\n\n// Import search store\nimport { state as searchState, actions as searchActions } from '../../store/search.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// State\nconst searchQuery = ref('');\nconst activeFilter = ref('all');\n\n// Array of search filters\nconst searchFilters = [\n { id: 'all', label: 'All' },\n { id: 'tracks', label: 'Songs' },\n { id: 'artists', label: 'Artists' },\n { id: 'albums', label: 'Albums' },\n { id: 'playlists', label: 'Playlists' },\n { id: 'genres', label: 'Genres' }\n];\n\n// Computed properties\nconst isLoading = computed(() => searchState.isLoading);\nconst searchError = computed(() => searchState.error);\nconst hasResults = computed(() => {\n return trackResults.value.length > 0 \|\| \n artistResults.value.length > 0 \|\| \n albumResults.value.length > 0 \|\| \n playlistResults.value.length > 0 \|\| \n genreResults.value.length > 0;\n});\n\nconst trackResults = computed(() => searchState.results.tracks \|\| []);\nconst artistResults = computed(() => searchState.results.artists \|\| []);\nconst albumResults = computed(() => searchState.results.albums \|\| []);\nconst playlistResults = computed(() => searchState.results.playlists \|\| []);\nconst genreResults = computed(() => searchState.results.genres \|\| []);\n\n// Methods\nconst handleSearch = (query) => {\n searchQuery.value = query;\n \n if (query.trim()) {\n // Update URL without reloading the page\n router.push({ \n name: 'music-search', \n query: { q: query },\n replace: true\n });\n \n // Perform search\n searchActions.search(query);\n } else {\n // Clear search when query is empty\n router.push({ \n name: 'music-search',\n replace: true\n });\n searchActions.clearSearch();\n }\n};\n\nconst setActiveFilter = (filter) => {\n activeFilter.value = filter;\n searchActions.setFilter(filter);\n};\n\n// Generate random gradient for genre cards\nconst getRandomGradient = () => {\n const colors = [\n 'linear-gradient(135deg, #1DB954, #1ED760)',\n 'linear-gradient(135deg, #FF6B6B, #FFE66D)',\n 'linear-gradient(135deg, #4776E6, #8E54E9)',\n 'linear-gradient(135deg, #FF8008, #FFC837)',\n 'linear-gradient(135deg, #7F00FF, #E100FF)',\n 'linear-gradient(135deg, #11998E, #38EF7D)'\n ];\n \n return colors[Math.floor(Math.random() * colors.length)];\n};\n\n// Watch for URL query parameter changes\nonMounted(() => {\n const query = route.query.q;\n if (query) {\n searchQuery.value = query;\n searchActions.search(query);\n }\n});\n\nwatch(() => route.query.q, (newQuery) => {\n if (newQuery && newQuery !== searchQuery.value) {\n searchQuery.value = newQuery;\n searchActions.search(newQuery);\n } else if (!newQuery) {\n searchQuery.value = '';\n searchActions.clearSearch();\n }\n});\n</script>\n\n<style scoped>\n.bg-gradient-color {\n background: var(--gradient-color, linear-gradient(135deg, #1DB954, #1ED760));\n}\n</style>"],"names":["searchState","searchActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6LA,UAAM,QAAQ,SAAQ;AACtB,UAAM,SAAS,UAAS;AAGxB,UAAM,cAAc,IAAI,EAAE;AAC1B,UAAM,eAAe,IAAI,KAAK;AAG9B,UAAM,gBAAgB;AAAA,MACpB,EAAE,IAAI,OAAO,OAAO,MAAK;AAAA,MACzB,EAAE,IAAI,UAAU,OAAO,QAAO;AAAA,MAC9B,EAAE,IAAI,WAAW,OAAO,UAAS;AAAA,MACjC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,MAC/B,EAAE,IAAI,aAAa,OAAO,YAAW;AAAA,MACrC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;AAGA,UAAM,YAAY,SAAS,MAAMA,MAAY,SAAS;AACtD,UAAM,cAAc,SAAS,MAAMA,MAAY,KAAK;AACpD,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,aAAa,MAAM,SAAS,KAC5B,cAAc,MAAM,SAAS,KAC7B,aAAa,MAAM,SAAS,KAC5B,gBAAgB,MAAM,SAAS,KAC/B,aAAa,MAAM,SAAS;AAAA,IACrC,CAAC;AAED,UAAM,eAAe,SAAS,MAAMA,MAAY,QAAQ,UAAU,CAAA,CAAE;AACpE,UAAM,gBAAgB,SAAS,MAAMA,MAAY,QAAQ,WAAW,CAAA,CAAE;AACtE,UAAM,eAAe,SAAS,MAAMA,MAAY,QAAQ,UAAU,CAAA,CAAE;AACpE,UAAM,kBAAkB,SAAS,MAAMA,MAAY,QAAQ,aAAa,CAAA,CAAE;AAC1E,UAAM,eAAe,SAAS,MAAMA,MAAY,QAAQ,UAAU,CAAA,CAAE;AAGpE,UAAM,eAAe,CAAC,UAAU;AAC9B,kBAAY,QAAQ;AAEpB,UAAI,MAAM,QAAQ;AAEhB,eAAO,KAAK;AAAA,UACV,MAAM;AAAA,UACN,OAAO,EAAE,GAAG,MAAK;AAAA,UACjB,SAAS;AAAA,QACf,CAAK;AAGDC,gBAAc,OAAO,KAAK;AAAA,MAC5B,OAAO;AAEL,eAAO,KAAK;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QACf,CAAK;AACDA,gBAAc,YAAW;AAAA,MAC3B;AAAA,IACF;AAEA,UAAM,kBAAkB,CAAC,WAAW;AAClC,mBAAa,QAAQ;AACrBA,cAAc,UAAU,MAAM;AAAA,IAChC;AAGA,UAAM,oBAAoB,MAAM;AAC9B,YAAM,SAAS;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAEE,aAAO,OAAO,KAAK,MAAM,KAAK,WAAW,OAAO,MAAM,CAAC;AAAA,IACzD;AAGA,cAAU,MAAM;AACd,YAAM,QAAQ,MAAM,MAAM;AAC1B,UAAI,OAAO;AACT,oBAAY,QAAQ;AACpBA,gBAAc,OAAO,KAAK;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,UAAM,MAAM,MAAM,MAAM,GAAG,CAAC,aAAa;AACvC,UAAI,YAAY,aAAa,YAAY,OAAO;AAC9C,oBAAY,QAAQ;AACpBA,gBAAc,OAAO,QAAQ;AAAA,MAC/B,WAAW,CAAC,UAAU;AACpB,oBAAY,QAAQ;AACpBA,gBAAc,YAAW;AAAA,MAC3B;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"SearchResults.vue.js","sources":["../../../../../../../src/modules/music/components/pages/SearchResults.vue"],"sourcesContent":["<!-- components/pages/SearchResults.vue -->\n<template>\n <div class=\"search-results-page pd-medium\">\n <div class=\"search-header mn-b-medium\">\n <h1 class=\"mn-b-small\">Search</h1>\n \n <BlockSearch \n :placeholder=\"'What do you want to listen to?'\"\n class=\"bg-light w-m-40r\"\n @search=\"handleSearch\"\n :autofocus=\"true\"\n />\n \n <div v-if=\"searchQuery\" class=\"search-filters flex gap-small mn-t-medium\">\n <Button \n v-for=\"filter in searchFilters\"\n :key=\"filter.id\"\n @click=\"setActiveFilter(filter.id)\"\n :class=\"[\n filter.id === activeFilter ? '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 {{ filter.label }}\n </Button>\n </div>\n </div>\n \n <div v-if=\"isLoading\" class=\"search-loading\">\n <Loader />\n </div>\n \n <div v-else-if=\"searchError\" class=\"search-error t-center pd-big\">\n <p class=\"t-fourth fw-medium\">{{ searchError }}</p>\n </div>\n \n <div v-else-if=\"!searchQuery\" class=\"search-empty t-center pd-big\">\n <h2 class=\"mn-b-small\">Search for music</h2>\n <p class=\"t-transp fw-medium\">Find your favorite songs, artists, albums, and playlists</p>\n </div>\n \n <div v-else-if=\"!hasResults\" class=\"search-no-results t-center pd-big\">\n <h2 class=\"mn-b-small\">No results found for \"{{ searchQuery }}\"</h2>\n <p class=\"t-transp fw-medium\">Please try different keywords or check your spelling</p>\n </div>\n \n <div v-else class=\"search-results\">\n <!-- Songs Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'tracks') && trackResults.length > 0\" class=\"search-section mn-b-medium\">\n <div class=\"flex-justify-between flex mn-b-small\">\n <h2 class=\"\">Songs</h2>\n <Button \n v-if=\"trackResults.length > 5 && activeFilter === 'all'\"\n @click=\"setActiveFilter('tracks')\"\n class=\"t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"bg-light radius-medium o-hidden\">\n <TrackListCard\n v-for=\"(track, index) in (activeFilter === 'all' ? trackResults.slice(0, 5) : trackResults)\"\n :key=\"track._id\"\n :track=\"track\"\n :index=\"index\"\n :showAlbum=\"true\"\n :showCover=\"true\"\n />\n </div>\n </section>\n \n <!-- Artists Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'artists') && artistResults.length > 0\" class=\"search-section mn-b-medium\">\n <div class=\"flex-justify-between flex mn-b-small\">\n <h2 class=\"\">Artists</h2>\n <Button \n v-if=\"artistResults.length > 6 && activeFilter === 'all'\"\n @click=\"setActiveFilter('artists')\"\n class=\"t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"artists-grid cols-6 mobile:cols-3 gap-small\">\n <div v-for=\"artist in (activeFilter === 'all' ? artistResults.slice(0, 6) : artistResults)\" :key=\"artist._id\">\n <ArtistCard :artist=\"artist\" />\n </div>\n </div>\n </section>\n \n <!-- Albums Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'albums') && albumResults.length > 0\" class=\"search-section mn-b-medium\">\n <div class=\"flex-justify-between flex mn-b-small\">\n <h2 class=\"\">Albums</h2>\n <Button \n v-if=\"albumResults.length > 5 && activeFilter === 'all'\"\n @click=\"setActiveFilter('albums')\"\n class=\"t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"albums-grid cols-5 mobile:cols-2 gap-small\">\n <div v-for=\"album in (activeFilter === 'all' ? albumResults.slice(0, 5) : albumResults)\" :key=\"album._id\">\n <AlbumCard :album=\"album\" />\n </div>\n </div>\n </section>\n \n <!-- Playlists Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'playlists') && playlistResults.length > 0\" class=\"search-section mn-b-medium\">\n <div class=\"flex-justify-between flex mn-b-small\">\n <h2 class=\"\">Playlists</h2>\n <Button \n v-if=\"playlistResults.length > 5 && activeFilter === 'all'\"\n @click=\"setActiveFilter('playlists')\"\n class=\"t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"playlists-grid cols-5 mobile:cols-2 gap-small\">\n <div v-for=\"playlist in (activeFilter === 'all' ? playlistResults.slice(0, 5) : playlistResults)\" :key=\"playlist._id\">\n <PlaylistCard :playlist=\"playlist\" />\n </div>\n </div>\n </section>\n \n <!-- Genres Results -->\n <section v-if=\"(activeFilter === 'all' \|\| activeFilter === 'genres') && genreResults.length > 0\" class=\"search-section\">\n <div class=\"flex-justify-between flex mn-b-small\">\n <h2 class=\"\">Genres</h2>\n <Button \n v-if=\"genreResults.length > 4 && activeFilter === 'all'\"\n @click=\"setActiveFilter('genres')\"\n class=\"t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin\"\n :showLoader=\"false\" \n :showSucces=\"false\"\n >\n See all\n </Button>\n </div>\n \n <div class=\"genres-grid cols-4 mobile:cols-2 gap-small\">\n <router-link \n v-for=\"genre in (activeFilter === 'all' ? genreResults.slice(0, 4) : genreResults)\" \n :key=\"genre._id\"\n :to=\"{ name: 'genre-detail', params: { url: genre.url } }\"\n class=\"genre-card bg-gradient-color pd-medium radius-medium t-center hover:scale-[1.05] ease-cubic-in-out\"\n :style=\"{ \n '--gradient-color': getRandomGradient() \n }\"\n >\n <h3 class=\"\">{{ genre.name }}</h3>\n </router-link>\n </div>\n </section>\n </div>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.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';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\n\n// Import search store\nimport { state as searchState, actions as searchActions } from '../../store/search.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// State\nconst searchQuery = ref('');\nconst activeFilter = ref('all');\n\n// Array of search filters\nconst searchFilters = [\n { id: 'all', label: 'All' },\n { id: 'tracks', label: 'Songs' },\n { id: 'artists', label: 'Artists' },\n { id: 'albums', label: 'Albums' },\n { id: 'playlists', label: 'Playlists' },\n { id: 'genres', label: 'Genres' }\n];\n\n// Computed properties\nconst isLoading = computed(() => searchState.isLoading);\nconst searchError = computed(() => searchState.error);\nconst hasResults = computed(() => {\n return trackResults.value.length > 0 \|\| \n artistResults.value.length > 0 \|\| \n albumResults.value.length > 0 \|\| \n playlistResults.value.length > 0 \|\| \n genreResults.value.length > 0;\n});\n\nconst trackResults = computed(() => searchState.results.tracks \|\| []);\nconst artistResults = computed(() => searchState.results.artists \|\| []);\nconst albumResults = computed(() => searchState.results.albums \|\| []);\nconst playlistResults = computed(() => searchState.results.playlists \|\| []);\nconst genreResults = computed(() => searchState.results.genres \|\| []);\n\n// Methods\nconst handleSearch = (query) => {\n searchQuery.value = query;\n \n if (query.trim()) {\n // Update URL without reloading the page\n router.push({ \n name: 'music-search', \n query: { q: query },\n replace: true\n });\n \n // Perform search\n searchActions.search(query);\n } else {\n // Clear search when query is empty\n router.push({ \n name: 'music-search',\n replace: true\n });\n searchActions.clearSearch();\n }\n};\n\nconst setActiveFilter = (filter) => {\n activeFilter.value = filter;\n searchActions.setFilter(filter);\n};\n\n// Generate random gradient for genre cards\nconst getRandomGradient = () => {\n const colors = [\n 'linear-gradient(135deg, #1DB954, #1ED760)',\n 'linear-gradient(135deg, #FF6B6B, #FFE66D)',\n 'linear-gradient(135deg, #4776E6, #8E54E9)',\n 'linear-gradient(135deg, #FF8008, #FFC837)',\n 'linear-gradient(135deg, #7F00FF, #E100FF)',\n 'linear-gradient(135deg, #11998E, #38EF7D)'\n ];\n \n return colors[Math.floor(Math.random() * colors.length)];\n};\n\n// Watch for URL query parameter changes\nonMounted(() => {\n const query = route.query.q;\n if (query) {\n searchQuery.value = query;\n searchActions.search(query);\n }\n});\n\nwatch(() => route.query.q, (newQuery) => {\n if (newQuery && newQuery !== searchQuery.value) {\n searchQuery.value = newQuery;\n searchActions.search(newQuery);\n } else if (!newQuery) {\n searchQuery.value = '';\n searchActions.clearSearch();\n }\n});\n</script>\n\n<style scoped>\n.bg-gradient-color {\n background: var(--gradient-color, linear-gradient(135deg, #1DB954, #1ED760));\n}\n</style>"],"names":["searchState","searchActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6LA,UAAM,QAAQ,SAAQ;AACtB,UAAM,SAAS,UAAS;AAGxB,UAAM,cAAc,IAAI,EAAE;AAC1B,UAAM,eAAe,IAAI,KAAK;AAG9B,UAAM,gBAAgB;AAAA,MACpB,EAAE,IAAI,OAAO,OAAO,MAAK;AAAA,MACzB,EAAE,IAAI,UAAU,OAAO,QAAO;AAAA,MAC9B,EAAE,IAAI,WAAW,OAAO,UAAS;AAAA,MACjC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,MAC/B,EAAE,IAAI,aAAa,OAAO,YAAW;AAAA,MACrC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;AAGA,UAAM,YAAY,SAAS,MAAMA,MAAY,SAAS;AACtD,UAAM,cAAc,SAAS,MAAMA,MAAY,KAAK;AACpD,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,aAAa,MAAM,SAAS,KAC5B,cAAc,MAAM,SAAS,KAC7B,aAAa,MAAM,SAAS,KAC5B,gBAAgB,MAAM,SAAS,KAC/B,aAAa,MAAM,SAAS;AAAA,IACrC,CAAC;AAED,UAAM,eAAe,SAAS,MAAMA,MAAY,QAAQ,UAAU,CAAA,CAAE;AACpE,UAAM,gBAAgB,SAAS,MAAMA,MAAY,QAAQ,WAAW,CAAA,CAAE;AACtE,UAAM,eAAe,SAAS,MAAMA,MAAY,QAAQ,UAAU,CAAA,CAAE;AACpE,UAAM,kBAAkB,SAAS,MAAMA,MAAY,QAAQ,aAAa,CAAA,CAAE;AAC1E,UAAM,eAAe,SAAS,MAAMA,MAAY,QAAQ,UAAU,CAAA,CAAE;AAGpE,UAAM,eAAe,CAAC,UAAU;AAC9B,kBAAY,QAAQ;AAEpB,UAAI,MAAM,QAAQ;AAEhB,eAAO,KAAK;AAAA,UACV,MAAM;AAAA,UACN,OAAO,EAAE,GAAG,MAAK;AAAA,UACjB,SAAS;AAAA,QACf,CAAK;AAGDC,gBAAc,OAAO,KAAK;AAAA,MAC5B,OAAO;AAEL,eAAO,KAAK;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QACf,CAAK;AACDA,gBAAc,YAAW;AAAA,MAC3B;AAAA,IACF;AAEA,UAAM,kBAAkB,CAAC,WAAW;AAClC,mBAAa,QAAQ;AACrBA,cAAc,UAAU,MAAM;AAAA,IAChC;AAGA,UAAM,oBAAoB,MAAM;AAC9B,YAAM,SAAS;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAEE,aAAO,OAAO,KAAK,MAAM,KAAK,WAAW,OAAO,MAAM,CAAC;AAAA,IACzD;AAGA,cAAU,MAAM;AACd,YAAM,QAAQ,MAAM,MAAM;AAC1B,UAAI,OAAO;AACT,oBAAY,QAAQ;AACpBA,gBAAc,OAAO,KAAK;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,UAAM,MAAM,MAAM,MAAM,GAAG,CAAC,aAAa;AACvC,UAAI,YAAY,aAAa,YAAY,OAAO;AAC9C,oBAAY,QAAQ;AACpBA,gBAAc,OAAO,QAAQ;AAAA,MAC/B,WAAW,CAAC,UAAU;AACpB,oBAAY,QAAQ;AACpBA,gBAAc,YAAW;AAAA,MAC3B;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}