@ozdao/martyrs 0.2.492 → 0.2.494

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

@@ -1,62 +1,46 @@
-import { resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, createTextVNode, unref, Fragment, renderList, createBlock } from "vue";
+import { createElementBlock, openBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, createBlock } from "vue";
 import _sfc_main$1 from "../../../../components/Feed/Feed.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
 import AlbumCard from "../cards/AlbumCard.vue.js";
 import ArtistCard from "../cards/ArtistCard.vue.js";
-/* empty css                                      */
-import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-import "../../store/player.js";
-/* empty css                      */
 import _sfc_main$2 from "../cards/TrackListCard.vue.js";
-import { state, actions } from "../../store/playlists.js";
-import { state as state$1, actions as actions$1 } from "../../store/albums.js";
-import { state as state$2, actions as actions$2 } from "../../store/tracks.js";
+import { state as state$2, actions as actions$2 } from "../../store/playlists.js";
+import { state, actions } from "../../store/albums.js";
+import { state as state$1, actions as actions$1 } from "../../store/tracks.js";
 import { state as state$3, actions as actions$3 } from "../../store/artists.js";
 /* empty css               */
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "music-home-page pd-medium mobile:pd-thin" };
-const _hoisted_2 = { class: "mn-b-medium" };
-const _hoisted_3 = { class: "flex-between flex mn-b-small" };
-const _hoisted_4 = { class: "mn-b-medium" };
-const _hoisted_5 = { class: "flex-between flex mn-b-small" };
-const _hoisted_6 = { class: "mn-b-medium" };
-const _hoisted_7 = { class: "flex-between flex mn-b-small" };
-const _hoisted_8 = { class: "bg-dark-transp-10 radius-medium o-hidden" };
-const _hoisted_9 = { class: "flex-between flex mn-b-small" };
+const _hoisted_2 = { class: "mn-b-semi" };
+const _hoisted_3 = { class: "mn-b-medium" };
+const _hoisted_4 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_5 = { class: "mn-b-medium" };
 const _sfc_main = {
   __name: "MusicHome",
   setup(__props) {
     return (_ctx, _cache) => {
-      const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("section", _hoisted_2, [
-          createElementVNode("div", _hoisted_3, [
-            _cache[1] || (_cache[1] = createElementVNode("h2", { class: "" }, "Featured Playlists", -1)),
-            createVNode(_component_router_link, {
-              to: { path: "/music/playlists" },
-              class: "t-main t-small hover-opacity"
-            }, {
-              default: withCtx(() => _cache[0] || (_cache[0] = [
-                createTextVNode("See all")
-              ])),
-              _: 1
-            })
-          ]),
+          _cache[0] || (_cache[0] = createElementVNode("div", { class: "flex-between flex mn-b-small" }, [
+            createElementVNode("h3", { class: "" }, "New Releases")
+          ], -1)),
           createVNode(_sfc_main$1, {
             showLoadMore: false,
             LoadMore: false,
             states: {
               empty: {
-                title: "No Playlists",
-                description: "No featured playlists available at the moment."
+                title: "No New Releases",
+                description: "No new albums available at the moment."
               }
             },
             store: {
-              read: (options) => unref(actions).fetchFeaturedPlaylists(options),
+              read: (options) => unref(actions).fetchFeaturedAlbums(options),
               state: unref(state)
             },
             options: {
-              limit: 5,
-              featured: true
+              limit: 4,
+              sortParam: "releaseDate",
+              sortOrder: "desc"
             },
             skeleton: {
               structure: [
@@ -64,149 +48,123 @@ const _sfc_main = {
                 { block: "text", size: "medium" },
                 { block: "text", size: "small" }
               ],
-              horizontal: false
+              horizontal: false,
+              class: "h-max-15r"
             },
-            class: "cols-5 mobile:cols-2 gap-small"
+            class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide"
           }, {
             default: withCtx(({ items }) => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(items, (playlist) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(items, (album) => {
                 return openBlock(), createElementBlock("li", {
-                  key: playlist._id
+                  key: album._id,
+                  class: "flex-none scroll-snap-align-start"
                 }, [
-                  createVNode(PlaylistCard, {
-                    playlist,
-                    class: "hover-scale-1 transition-cubic-in-out"
-                  }, null, 8, ["playlist"])
+                  createVNode(AlbumCard, {
+                    album,
+                    class: "w-min-15r transition-cubic-in-out"
+                  }, null, 8, ["album"])
                 ]);
               }), 128))
             ]),
             _: 1
           }, 8, ["store"])
         ]),
-        createElementVNode("section", _hoisted_4, [
-          createElementVNode("div", _hoisted_5, [
-            _cache[3] || (_cache[3] = createElementVNode("h2", { class: "" }, "New Releases", -1)),
-            createVNode(_component_router_link, {
-              to: { path: "/music/albums" },
-              class: "t-main t-small hover-opacity"
-            }, {
-              default: withCtx(() => _cache[2] || (_cache[2] = [
-                createTextVNode("See all")
-              ])),
-              _: 1
-            })
-          ]),
+        createElementVNode("section", _hoisted_3, [
+          _cache[1] || (_cache[1] = createElementVNode("div", { class: "flex-between flex mn-b-small" }, [
+            createElementVNode("h3", { class: "" }, "Popular Tracks")
+          ], -1)),
           createVNode(_sfc_main$1, {
             showLoadMore: false,
             LoadMore: false,
             states: {
               empty: {
-                title: "No New Releases",
-                description: "No new albums available at the moment."
+                title: "No Popular Tracks",
+                description: "No popular tracks available at the moment."
               }
             },
             store: {
-              read: (options) => unref(actions$1).fetchAlbums(options),
+              read: (options) => unref(actions$1).fetchPopularTracks(options),
               state: unref(state$1)
             },
             options: {
-              limit: 4,
-              sortParam: "releaseDate",
-              sortOrder: "desc"
+              limit: 10,
+              popular: true
             },
             skeleton: {
               structure: [
-                { block: "square", size: "large", rounded: false },
                 { block: "text", size: "medium" },
                 { block: "text", size: "small" }
               ],
-              horizontal: false
+              horizontal: true
             },
-            class: "cols-4 mobile:cols-2 gap-small"
+            class: "gap-zero"
           }, {
             default: withCtx(({ items }) => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(items, (album) => {
-                return openBlock(), createElementBlock("li", {
-                  key: album._id
-                }, [
-                  createVNode(AlbumCard, {
-                    album,
-                    class: "hover-scale-1 transition-cubic-in-out"
-                  }, null, 8, ["album"])
-                ]);
-              }), 128))
+              createElementVNode("div", _hoisted_4, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track, index) => {
+                  return openBlock(), createBlock(_sfc_main$2, {
+                    key: track._id,
+                    track,
+                    index,
+                    showAlbum: true,
+                    showCover: true
+                  }, null, 8, ["track", "index"]);
+                }), 128))
+              ])
             ]),
             _: 1
           }, 8, ["store"])
         ]),
-        createElementVNode("section", _hoisted_6, [
-          createElementVNode("div", _hoisted_7, [
-            _cache[5] || (_cache[5] = createElementVNode("h2", { class: "" }, "Popular Tracks", -1)),
-            createVNode(_component_router_link, {
-              to: { path: "/music/tracks" },
-              class: "t-main t-small hover-opacity"
-            }, {
-              default: withCtx(() => _cache[4] || (_cache[4] = [
-                createTextVNode("See all")
-              ])),
-              _: 1
-            })
-          ]),
+        createElementVNode("section", _hoisted_5, [
+          _cache[2] || (_cache[2] = createElementVNode("div", { class: "flex-between flex mn-b-small" }, [
+            createElementVNode("h2", { class: "" }, "Featured Playlists")
+          ], -1)),
           createVNode(_sfc_main$1, {
             showLoadMore: false,
             LoadMore: false,
             states: {
               empty: {
-                title: "No Popular Tracks",
-                description: "No popular tracks available at the moment."
+                title: "No Playlists",
+                description: "No featured playlists available at the moment."
               }
             },
             store: {
-              read: (options) => unref(actions$2).fetchPopularTracks(options),
+              read: (options) => unref(actions$2).fetchFeaturedPlaylists(options),
               state: unref(state$2)
             },
             options: {
-              limit: 10,
-              popular: true
+              limit: 5,
+              featured: true
             },
             skeleton: {
               structure: [
+                { block: "square", size: "large", rounded: false },
                 { block: "text", size: "medium" },
                 { block: "text", size: "small" }
               ],
-              horizontal: true
+              horizontal: false
             },
-            class: "gap-zero"
+            class: "cols-5 mobile:cols-2 gap-small"
           }, {
             default: withCtx(({ items }) => [
-              createElementVNode("div", _hoisted_8, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track, index) => {
-                  return openBlock(), createBlock(_sfc_main$2, {
-                    key: track._id,
-                    track,
-                    index,
-                    showAlbum: true,
-                    showCover: true
-                  }, null, 8, ["track", "index"]);
-                }), 128))
-              ])
+              (openBlock(true), createElementBlock(Fragment, null, renderList(items, (playlist) => {
+                return openBlock(), createElementBlock("li", {
+                  key: playlist._id
+                }, [
+                  createVNode(PlaylistCard, {
+                    playlist,
+                    class: "hover-scale-1 transition-cubic-in-out"
+                  }, null, 8, ["playlist"])
+                ]);
+              }), 128))
             ]),
             _: 1
           }, 8, ["store"])
         ]),
         createElementVNode("section", null, [
-          createElementVNode("div", _hoisted_9, [
-            _cache[7] || (_cache[7] = createElementVNode("h2", { class: "" }, "Top Artists", -1)),
-            createVNode(_component_router_link, {
-              to: { path: "/music/artists" },
-              class: "t-main t-small hover-opacity"
-            }, {
-              default: withCtx(() => _cache[6] || (_cache[6] = [
-                createTextVNode("See all")
-              ])),
-              _: 1
-            })
-          ]),
+          _cache[3] || (_cache[3] = createElementVNode("div", { class: "flex-between flex mn-b-small" }, [
+            createElementVNode("h2", { class: "" }, "Top Artists")
+          ], -1)),
           createVNode(_sfc_main$1, {
             showLoadMore: false,
             LoadMore: false,
@@ -236,11 +194,12 @@ const _sfc_main = {
             default: withCtx(({ items }) => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(items, (artist) => {
                 return openBlock(), createElementBlock("li", {
+                  class: "flex-child-default w-100",
                   key: artist._id
                 }, [
                   createVNode(ArtistCard, {
                     artist,
-                    class: "hover-scale-1 transition-cubic-in-out"
+                    class: "hover-scale-1 flex-child-default transition-cubic-in-out"
                   }, null, 8, ["artist"])
                 ]);
               }), 128))
@@ -252,7 +211,7 @@ const _sfc_main = {
     };
   }
 };
-const MusicHome = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14a77aad"]]);
+const MusicHome = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82023828"]]);
 export {
   MusicHome as default
 };

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

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

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

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const vueRouter = require("vue-router");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
-const TrackCard = require("../cards/TrackCard.vue.cjs");
+const TrackListCard = require("../cards/TrackListCard.vue.cjs");
 const AlbumCard = require("../cards/AlbumCard.vue.cjs");
 const PlaylistCard = require("../cards/PlaylistCard.vue.cjs");
 const ArtistCard = require("../cards/ArtistCard.vue.cjs");
@@ -36,6 +36,7 @@ const _hoisted_10 = {
   class: "tracks-tab"
 };
 const _hoisted_11 = { class: "flex-between flex mn-b-small" };
+const _hoisted_12 = { class: "bg-light radius-medium o-hidden" };
 const _sfc_main = {
   __name: "MusicLibrary",
   setup(__props) {
@@ -87,10 +88,10 @@ const _sfc_main = {
           ]),
           vue.createVNode(Feed.default, {
             store: {
-              read: (options) => vue.unref(playlists.actions).fetchPlaylists({ ...options, owner: { type: "user", target: vue.unref(auth.state).user._id } }),
+              read: (options) => vue.unref(playlists.actions).fetchPlaylists(options),
               state: vue.unref(playlists.state)
             },
-            options: { owner: { type: "user", target: vue.unref(auth.state).user._id } },
+            options: { creator: vue.unref(auth.state).user._id },
             states: {
               empty: {
                 title: "No playlists yet",
@@ -227,15 +228,17 @@ const _sfc_main = {
             class: "gap-medium"
           }, {
             default: vue.withCtx(({ items }) => [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (track) => {
-                return vue.openBlock(), vue.createBlock(TrackCard.default, {
-                  key: track._id,
-                  track,
-                  showAlbum: true,
-                  showCover: true,
-                  class: "w-100 bg-dark-transp-10 radius-medium"
-                }, null, 8, ["track"]);
-              }), 128))
+              vue.createElementVNode("div", _hoisted_12, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (track, index) => {
+                  return vue.openBlock(), vue.createBlock(TrackListCard.default, {
+                    key: track._id,
+                    track,
+                    index,
+                    showAlbum: true,
+                    showCover: true
+                  }, null, 8, ["track", "index"]);
+                }), 128))
+              ])
             ]),
             _: 1
           }, 8, ["store", "options"])

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

@@ -1 +1 @@
-{"version":3,"file":"MusicLibrary.vue.cjs","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-dark-transp-50  hover-bg-dark',\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, owner: { type: 'user', target: authState.user._id } }),\n          state: playlistsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: 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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <TrackCard\n            v-for=\"track in items\"\n            :key=\"track._id\"\n            :track=\"track\"\n            :showAlbum=\"true\"\n            :showCover=\"true\"\n            class=\"w-100 bg-dark-transp-10 radius-medium\"\n          />\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 TrackCard from '../cards/TrackCard.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":["useRouter","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8MeA,cAAAA,UAAS;AAGxB,UAAM,YAAYC,IAAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MusicLibrary.vue.cjs","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-dark-transp-50  hover-bg-dark',\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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":["useRouter","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgNeA,cAAAA,UAAS;AAGxB,UAAM,YAAYC,IAAAA,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/MusicLibrary.vue.js

@@ -1,7 +1,7 @@
 import { ref, createElementBlock, openBlock, createElementVNode, createCommentVNode, Fragment, renderList, createVNode, normalizeClass, withCtx, createTextVNode, toDisplayString, unref, createBlock } from "vue";
 import { useRouter } from "vue-router";
 import _sfc_main$2 from "../../../../components/Feed/Feed.vue.js";
-import TrackCard from "../cards/TrackCard.vue.js";
+import _sfc_main$3 from "../cards/TrackListCard.vue.js";
 import AlbumCard from "../cards/AlbumCard.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
 import ArtistCard from "../cards/ArtistCard.vue.js";
@@ -34,6 +34,7 @@ const _hoisted_10 = {
   class: "tracks-tab"
 };
 const _hoisted_11 = { class: "flex-between flex mn-b-small" };
+const _hoisted_12 = { class: "bg-light radius-medium o-hidden" };
 const _sfc_main = {
   __name: "MusicLibrary",
   setup(__props) {
@@ -85,10 +86,10 @@ const _sfc_main = {
           ]),
           createVNode(_sfc_main$2, {
             store: {
-              read: (options) => unref(actions).fetchPlaylists({ ...options, owner: { type: "user", target: unref(state).user._id } }),
+              read: (options) => unref(actions).fetchPlaylists(options),
               state: unref(state$1)
             },
-            options: { owner: { type: "user", target: unref(state).user._id } },
+            options: { creator: unref(state).user._id },
             states: {
               empty: {
                 title: "No playlists yet",
@@ -225,15 +226,17 @@ const _sfc_main = {
             class: "gap-medium"
           }, {
             default: withCtx(({ items }) => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track) => {
-                return openBlock(), createBlock(TrackCard, {
-                  key: track._id,
-                  track,
-                  showAlbum: true,
-                  showCover: true,
-                  class: "w-100 bg-dark-transp-10 radius-medium"
-                }, null, 8, ["track"]);
-              }), 128))
+              createElementVNode("div", _hoisted_12, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track, index) => {
+                  return openBlock(), createBlock(_sfc_main$3, {
+                    key: track._id,
+                    track,
+                    index,
+                    showAlbum: true,
+                    showCover: true
+                  }, null, 8, ["track", "index"]);
+                }), 128))
+              ])
             ]),
             _: 1
           }, 8, ["store", "options"])

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

@@ -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-dark-transp-50  hover-bg-dark',\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, owner: { type: 'user', target: authState.user._id } }),\n          state: playlistsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: 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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <TrackCard\n            v-for=\"track in items\"\n            :key=\"track._id\"\n            :track=\"track\"\n            :showAlbum=\"true\"\n            :showCover=\"true\"\n            class=\"w-100 bg-dark-transp-10 radius-medium\"\n          />\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 TrackCard from '../cards/TrackCard.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Me,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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-dark-transp-50  hover-bg-dark',\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}