@ozdao/martyrs 0.2.485 → 0.2.487

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

@@ -0,0 +1,248 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+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 AlbumCard = require("../cards/AlbumCard.vue.cjs");
+const PlaylistCard = require("../cards/PlaylistCard.vue.cjs");
+const ArtistCard = require("../cards/ArtistCard.vue.cjs");
+const Button = require("../../../../components/Button/Button.vue.cjs");
+const auth = require("../../../auth/views/store/auth.cjs");
+const playlists = require("../../store/playlists.cjs");
+const albums = require("../../store/albums.cjs");
+const artists = require("../../store/artists.cjs");
+const tracks = require("../../store/tracks.cjs");
+const _hoisted_1 = { class: "music-library-page" };
+const _hoisted_2 = { class: "library-tabs mn-b-medium" };
+const _hoisted_3 = { class: "flex gap-small" };
+const _hoisted_4 = {
+  key: 0,
+  class: "playlists-tab"
+};
+const _hoisted_5 = { class: "flex-between flex mn-b-small" };
+const _hoisted_6 = {
+  key: 1,
+  class: "albums-tab"
+};
+const _hoisted_7 = { class: "flex-between flex mn-b-small" };
+const _hoisted_8 = {
+  key: 2,
+  class: "artists-tab"
+};
+const _hoisted_9 = { class: "flex-between flex mn-b-small" };
+const _hoisted_10 = {
+  key: 3,
+  class: "tracks-tab"
+};
+const _hoisted_11 = { class: "flex-between flex mn-b-small" };
+const _sfc_main = {
+  __name: "MusicLibrary",
+  setup(__props) {
+    vueRouter.useRouter();
+    const activeTab = vue.ref("playlists");
+    const tabs = [
+      { id: "playlists", label: "Playlists" },
+      { id: "albums", label: "Albums" },
+      { id: "artists", label: "Artists" },
+      { id: "tracks", label: "Tracks" }
+    ];
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        _cache[12] || (_cache[12] = vue.createElementVNode("h1", { class: "mn-b-medium" }, "Your Library", -1)),
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createElementVNode("div", _hoisted_3, [
+            (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabs, (tab) => {
+              return vue.createVNode(Button.default, {
+                key: tab.id,
+                onClick: ($event) => activeTab.value = tab.id,
+                class: vue.normalizeClass([[
+                  activeTab.value === tab.id ? "bg-white t-black" : "bg-dark-transp-50  hover-bg-dark"
+                ], "radius-extra pd-small"]),
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(tab.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClick", "class"]);
+            }), 64))
+          ])
+        ]),
+        activeTab.value === "playlists" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.createElementVNode("div", _hoisted_5, [
+            _cache[5] || (_cache[5] = vue.createElementVNode("h2", { class: "" }, "Your Playlists", -1)),
+            vue.createVNode(Button.default, {
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({ name: "playlist-create" })),
+              class: "bg-main radius-small pd-small hover-scale-1",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: vue.withCtx(() => _cache[4] || (_cache[4] = [
+                vue.createTextVNode(" Create Playlist ")
+              ])),
+              _: 1
+            })
+          ]),
+          vue.createVNode(Feed.default, {
+            store: {
+              read: (options) => vue.unref(playlists.actions).fetchPlaylists({ ...options, owner: { type: "user", target: vue.unref(auth.state).user._id } }),
+              state: vue.unref(playlists.state)
+            },
+            options: { owner: { type: "user", target: vue.unref(auth.state).user._id } },
+            states: {
+              empty: {
+                title: "No playlists yet",
+                description: "Create your first playlist to see it here",
+                class: "pd-big bg-dark-transp-10 radius-medium"
+              }
+            },
+            class: "gap-medium"
+          }, {
+            default: vue.withCtx(({ items }) => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (playlist) => {
+                return vue.openBlock(), vue.createBlock(PlaylistCard.default, {
+                  key: playlist._id,
+                  playlist,
+                  class: "w-100"
+                }, null, 8, ["playlist"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["store", "options"])
+        ])) : vue.createCommentVNode("", true),
+        activeTab.value === "albums" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+          vue.createElementVNode("div", _hoisted_7, [
+            _cache[7] || (_cache[7] = vue.createElementVNode("h2", { class: "" }, "Your Albums", -1)),
+            vue.createVNode(Button.default, {
+              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$router.push({ name: "album-create" })),
+              class: "bg-main radius-small pd-small hover-scale-1",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: vue.withCtx(() => _cache[6] || (_cache[6] = [
+                vue.createTextVNode(" Create Album ")
+              ])),
+              _: 1
+            })
+          ]),
+          vue.createVNode(Feed.default, {
+            store: {
+              read: (options) => vue.unref(albums.actions).fetchAlbums({ ...options, owner: { type: "user", target: vue.unref(auth.state).user._id } }),
+              state: vue.unref(albums.state)
+            },
+            options: { owner: { type: "user", target: vue.unref(auth.state).user._id } },
+            states: {
+              empty: {
+                title: "No albums yet",
+                description: "Upload your first album to see it here",
+                class: "pd-big bg-dark-transp-10 radius-medium"
+              }
+            },
+            class: "gap-medium"
+          }, {
+            default: vue.withCtx(({ items }) => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (album) => {
+                return vue.openBlock(), vue.createBlock(AlbumCard.default, {
+                  key: album._id,
+                  album,
+                  class: "w-100"
+                }, null, 8, ["album"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["store", "options"])
+        ])) : vue.createCommentVNode("", true),
+        activeTab.value === "artists" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+          vue.createElementVNode("div", _hoisted_9, [
+            _cache[9] || (_cache[9] = vue.createElementVNode("h2", { class: "" }, "Your Artists", -1)),
+            vue.createVNode(Button.default, {
+              onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$router.push({ name: "artist-create" })),
+              class: "bg-main radius-small pd-small hover-scale-1",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: vue.withCtx(() => _cache[8] || (_cache[8] = [
+                vue.createTextVNode(" Create Artist ")
+              ])),
+              _: 1
+            })
+          ]),
+          vue.createVNode(Feed.default, {
+            store: {
+              read: (options) => vue.unref(artists.actions).fetchArtists({ ...options, owner: { type: "user", target: vue.unref(auth.state).user._id } }),
+              state: vue.unref(artists.state)
+            },
+            options: { owner: { type: "user", target: vue.unref(auth.state).user._id } },
+            states: {
+              empty: {
+                title: "No artists yet",
+                description: "Create your first artist profile to see it here",
+                class: "pd-big bg-dark-transp-10 radius-medium"
+              }
+            },
+            class: "gap-medium"
+          }, {
+            default: vue.withCtx(({ items }) => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (artist) => {
+                return vue.openBlock(), vue.createBlock(ArtistCard.default, {
+                  key: artist._id,
+                  artist,
+                  class: "w-100"
+                }, null, 8, ["artist"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["store", "options"])
+        ])) : vue.createCommentVNode("", true),
+        activeTab.value === "tracks" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+          vue.createElementVNode("div", _hoisted_11, [
+            _cache[11] || (_cache[11] = vue.createElementVNode("h2", { class: "" }, "Your Tracks", -1)),
+            vue.createVNode(Button.default, {
+              onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$router.push({ name: "track-create" })),
+              class: "bg-main radius-small pd-small hover-scale-1",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: vue.withCtx(() => _cache[10] || (_cache[10] = [
+                vue.createTextVNode(" Upload Track ")
+              ])),
+              _: 1
+            })
+          ]),
+          vue.createVNode(Feed.default, {
+            store: {
+              read: (options) => vue.unref(tracks.actions).fetchTracks({ ...options, owner: { type: "user", target: vue.unref(auth.state).user._id } }),
+              state: vue.unref(tracks.state)
+            },
+            options: { owner: { type: "user", target: vue.unref(auth.state).user._id } },
+            states: {
+              empty: {
+                title: "No tracks yet",
+                description: "Upload your first track to see it here",
+                class: "pd-big bg-dark-transp-10 radius-medium"
+              }
+            },
+            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))
+            ]),
+            _: 1
+          }, 8, ["store", "options"])
+        ])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=MusicLibrary.vue.cjs.map

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

@@ -0,0 +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,cAAS,UAAA;AAGxB,UAAM,YAAYC,IAAG,IAAC,WAAW;AAGjC,UAAM,OAAO;AAAA,MACX,EAAE,IAAI,aAAa,OAAO,YAAa;AAAA,MACvC,EAAE,IAAI,UAAU,OAAO,SAAU;AAAA,MACjC,EAAE,IAAI,WAAW,OAAO,UAAW;AAAA,MACnC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,248 @@
+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 AlbumCard from "../cards/AlbumCard.vue.js";
+import PlaylistCard from "../cards/PlaylistCard.vue.js";
+import ArtistCard from "../cards/ArtistCard.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import { state } from "../../../auth/views/store/auth.js";
+import { state as state$1, actions } from "../../store/playlists.js";
+import { state as state$2, actions as actions$1 } from "../../store/albums.js";
+import { state as state$3, actions as actions$2 } from "../../store/artists.js";
+import { state as state$4, actions as actions$3 } from "../../store/tracks.js";
+const _hoisted_1 = { class: "music-library-page" };
+const _hoisted_2 = { class: "library-tabs mn-b-medium" };
+const _hoisted_3 = { class: "flex gap-small" };
+const _hoisted_4 = {
+  key: 0,
+  class: "playlists-tab"
+};
+const _hoisted_5 = { class: "flex-between flex mn-b-small" };
+const _hoisted_6 = {
+  key: 1,
+  class: "albums-tab"
+};
+const _hoisted_7 = { class: "flex-between flex mn-b-small" };
+const _hoisted_8 = {
+  key: 2,
+  class: "artists-tab"
+};
+const _hoisted_9 = { class: "flex-between flex mn-b-small" };
+const _hoisted_10 = {
+  key: 3,
+  class: "tracks-tab"
+};
+const _hoisted_11 = { class: "flex-between flex mn-b-small" };
+const _sfc_main = {
+  __name: "MusicLibrary",
+  setup(__props) {
+    useRouter();
+    const activeTab = ref("playlists");
+    const tabs = [
+      { id: "playlists", label: "Playlists" },
+      { id: "albums", label: "Albums" },
+      { id: "artists", label: "Artists" },
+      { id: "tracks", label: "Tracks" }
+    ];
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _cache[12] || (_cache[12] = createElementVNode("h1", { class: "mn-b-medium" }, "Your Library", -1)),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            (openBlock(), createElementBlock(Fragment, null, renderList(tabs, (tab) => {
+              return createVNode(_sfc_main$1, {
+                key: tab.id,
+                onClick: ($event) => activeTab.value = tab.id,
+                class: normalizeClass([[
+                  activeTab.value === tab.id ? "bg-white t-black" : "bg-dark-transp-50  hover-bg-dark"
+                ], "radius-extra pd-small"]),
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(tab.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClick", "class"]);
+            }), 64))
+          ])
+        ]),
+        activeTab.value === "playlists" ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          createElementVNode("div", _hoisted_5, [
+            _cache[5] || (_cache[5] = createElementVNode("h2", { class: "" }, "Your Playlists", -1)),
+            createVNode(_sfc_main$1, {
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({ name: "playlist-create" })),
+              class: "bg-main radius-small pd-small hover-scale-1",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[4] || (_cache[4] = [
+                createTextVNode(" Create Playlist ")
+              ])),
+              _: 1
+            })
+          ]),
+          createVNode(_sfc_main$2, {
+            store: {
+              read: (options) => unref(actions).fetchPlaylists({ ...options, owner: { type: "user", target: unref(state).user._id } }),
+              state: unref(state$1)
+            },
+            options: { owner: { type: "user", target: unref(state).user._id } },
+            states: {
+              empty: {
+                title: "No playlists yet",
+                description: "Create your first playlist to see it here",
+                class: "pd-big bg-dark-transp-10 radius-medium"
+              }
+            },
+            class: "gap-medium"
+          }, {
+            default: withCtx(({ items }) => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(items, (playlist) => {
+                return openBlock(), createBlock(PlaylistCard, {
+                  key: playlist._id,
+                  playlist,
+                  class: "w-100"
+                }, null, 8, ["playlist"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["store", "options"])
+        ])) : createCommentVNode("", true),
+        activeTab.value === "albums" ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          createElementVNode("div", _hoisted_7, [
+            _cache[7] || (_cache[7] = createElementVNode("h2", { class: "" }, "Your Albums", -1)),
+            createVNode(_sfc_main$1, {
+              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$router.push({ name: "album-create" })),
+              class: "bg-main radius-small pd-small hover-scale-1",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[6] || (_cache[6] = [
+                createTextVNode(" Create Album ")
+              ])),
+              _: 1
+            })
+          ]),
+          createVNode(_sfc_main$2, {
+            store: {
+              read: (options) => unref(actions$1).fetchAlbums({ ...options, owner: { type: "user", target: unref(state).user._id } }),
+              state: unref(state$2)
+            },
+            options: { owner: { type: "user", target: unref(state).user._id } },
+            states: {
+              empty: {
+                title: "No albums yet",
+                description: "Upload your first album to see it here",
+                class: "pd-big bg-dark-transp-10 radius-medium"
+              }
+            },
+            class: "gap-medium"
+          }, {
+            default: withCtx(({ items }) => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(items, (album) => {
+                return openBlock(), createBlock(AlbumCard, {
+                  key: album._id,
+                  album,
+                  class: "w-100"
+                }, null, 8, ["album"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["store", "options"])
+        ])) : createCommentVNode("", true),
+        activeTab.value === "artists" ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          createElementVNode("div", _hoisted_9, [
+            _cache[9] || (_cache[9] = createElementVNode("h2", { class: "" }, "Your Artists", -1)),
+            createVNode(_sfc_main$1, {
+              onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$router.push({ name: "artist-create" })),
+              class: "bg-main radius-small pd-small hover-scale-1",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[8] || (_cache[8] = [
+                createTextVNode(" Create Artist ")
+              ])),
+              _: 1
+            })
+          ]),
+          createVNode(_sfc_main$2, {
+            store: {
+              read: (options) => unref(actions$2).fetchArtists({ ...options, owner: { type: "user", target: unref(state).user._id } }),
+              state: unref(state$3)
+            },
+            options: { owner: { type: "user", target: unref(state).user._id } },
+            states: {
+              empty: {
+                title: "No artists yet",
+                description: "Create your first artist profile to see it here",
+                class: "pd-big bg-dark-transp-10 radius-medium"
+              }
+            },
+            class: "gap-medium"
+          }, {
+            default: withCtx(({ items }) => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(items, (artist) => {
+                return openBlock(), createBlock(ArtistCard, {
+                  key: artist._id,
+                  artist,
+                  class: "w-100"
+                }, null, 8, ["artist"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["store", "options"])
+        ])) : createCommentVNode("", true),
+        activeTab.value === "tracks" ? (openBlock(), createElementBlock("div", _hoisted_10, [
+          createElementVNode("div", _hoisted_11, [
+            _cache[11] || (_cache[11] = createElementVNode("h2", { class: "" }, "Your Tracks", -1)),
+            createVNode(_sfc_main$1, {
+              onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$router.push({ name: "track-create" })),
+              class: "bg-main radius-small pd-small hover-scale-1",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[10] || (_cache[10] = [
+                createTextVNode(" Upload Track ")
+              ])),
+              _: 1
+            })
+          ]),
+          createVNode(_sfc_main$2, {
+            store: {
+              read: (options) => unref(actions$3).fetchTracks({ ...options, owner: { type: "user", target: unref(state).user._id } }),
+              state: unref(state$4)
+            },
+            options: { owner: { type: "user", target: unref(state).user._id } },
+            states: {
+              empty: {
+                title: "No tracks yet",
+                description: "Upload your first track to see it here",
+                class: "pd-big bg-dark-transp-10 radius-medium"
+              }
+            },
+            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))
+            ]),
+            _: 1
+          }, 8, ["store", "options"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=MusicLibrary.vue.js.map

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

@@ -0,0 +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,YAAa;AAAA,MACvC,EAAE,IAAI,UAAU,OAAO,SAAU;AAAA,MACjC,EAAE,IAAI,WAAW,OAAO,UAAW;AAAA,MACnC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}