@ozdao/martyrs 0.2.485 → 0.2.487

package/dist/martyrs/src/modules/music/components/layouts/MusicLayout.vue.cjs

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const MusicPlayer = require("../player/MusicPlayer.vue.cjs");
+const SearchForm = require("../forms/SearchForm.vue.cjs");
+;/* empty css                                         */
+;/* empty css                                          */
+;/* empty css                                              */
+const IconChevronLeft = require("../../../icons/navigation/IconChevronLeft.vue.cjs");
+const IconChevronRight = require("../../../icons/navigation/IconChevronRight.vue.cjs");
+const player = require("../../store/player.cjs");
+const auth = require("../../../auth/views/store/auth.cjs");
+const _hoisted_1 = { class: "music-layout flex flex-column flex-nowrap w-100" };
+const _hoisted_2 = { class: "flex-child-shrink-0 z-index-3 flex-v-center flex-justify-between flex gap-small pd-small bg-main" };
+const _hoisted_3 = { class: "music-navigation-buttons flex gap-thin" };
+const _hoisted_4 = {
+  key: 0,
+  class: "music-search-bar flex-child-1 mn-l-medium mn-r-medium"
+};
+const _hoisted_5 = { class: "music-user-menu flex-nowrap flex pos-relative" };
+const _hoisted_6 = { class: "o-x-hidden" };
+const _sfc_main = {
+  __name: "MusicLayout",
+  setup(__props) {
+    const router = vueRouter.useRouter();
+    vue.ref(false);
+    vue.computed(() => {
+      return auth.state.access.status === true;
+    });
+    vue.computed(() => {
+      return auth.state.user;
+    });
+    const currentTrack = vue.computed(() => {
+      return player.state.currentTrack;
+    });
+    const handleSearch = (query) => {
+      router.push({ name: "music-search", query: { q: query } });
+    };
+    return (_ctx, _cache) => {
+      const _component_router_link = vue.resolveComponent("router-link");
+      const _component_router_view = vue.resolveComponent("router-view");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("header", _hoisted_2, [
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createElementVNode("button", {
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.go(-1)),
+              class: "bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro"
+            }, [
+              vue.createVNode(IconChevronLeft.default, {
+                class: "i-small",
+                fill: "rgb(var(--white))"
+              })
+            ]),
+            vue.createElementVNode("button", {
+              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$router.go(1)),
+              class: "bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro"
+            }, [
+              vue.createVNode(IconChevronRight.default, {
+                class: "i-small",
+                fill: "rgb(var(--white))"
+              })
+            ])
+          ]),
+          _ctx.$route.name !== "music-search" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+            vue.createVNode(SearchForm.default, {
+              onSearch: handleSearch,
+              placeholder: "Search music..."
+            })
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_5, [
+            vue.createVNode(_component_router_link, {
+              to: { name: "music-library" },
+              class: "pd-thin w-100 d-block hover-bg-dark radius-small"
+            }, {
+              default: vue.withCtx(() => _cache[2] || (_cache[2] = [
+                vue.createTextVNode(" Library ")
+              ])),
+              _: 1
+            }),
+            vue.createVNode(_component_router_link, {
+              to: { name: "track-create" },
+              class: "pd-thin w-100 d-block hover-bg-dark radius-small"
+            }, {
+              default: vue.withCtx(() => _cache[3] || (_cache[3] = [
+                vue.createTextVNode(" Upload ")
+              ])),
+              _: 1
+            })
+          ])
+        ]),
+        vue.createElementVNode("main", _hoisted_6, [
+          vue.createVNode(_component_router_view)
+        ]),
+        currentTrack.value ? (vue.openBlock(), vue.createBlock(MusicPlayer.default, {
+          key: 0,
+          class: "pos-fixed pos-b-0 w-100"
+        })) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=MusicLayout.vue.cjs.map

package/dist/martyrs/src/modules/music/components/layouts/MusicLayout.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MusicLayout.vue.cjs","sources":["../../../../../../../src/modules/music/components/layouts/MusicLayout.vue"],"sourcesContent":["<!-- components/layouts/MusicLayout.vue -->\n<template>\n  <div class=\"music-layout flex flex-column flex-nowrap w-100 \">\n    <!-- Header Bar -->\n    <header class=\"flex-child-shrink-0 z-index-3 flex-v-center flex-justify-between flex gap-small pd-small bg-main\">\n \n      <div class=\"music-navigation-buttons flex gap-thin\">\n        <button @click=\"$router.go(-1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronLeft class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n        <button @click=\"$router.go(1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronRight class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n      </div>\n    \n      <div class=\"music-search-bar flex-child-1 mn-l-medium mn-r-medium\" v-if=\"$route.name !== 'music-search'\">\n        <SearchForm @search=\"handleSearch\" placeholder=\"Search music...\" />\n      </div>\n      \n      <div class=\"music-user-menu flex-nowrap  flex pos-relative\">\n \n        <router-link :to=\"{ name: 'music-library' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Library\n        </router-link>\n        <router-link :to=\"{ name: 'track-create' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Upload\n        </router-link>\n        \n      </div>\n    </header>\n    \n    <!-- Main Content Area -->\n    <main class=\"o-x-hidden\">\n      <router-view></router-view>\n    </main>\n    \n    <!-- Music Player Fixed at Bottom -->\n    <MusicPlayer v-if=\"currentTrack\" class=\"pos-fixed pos-b-0 w-100 \"/>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter } from 'vue-router';\nimport MusicPlayer from '../player/MusicPlayer.vue';\nimport SearchForm from '../forms/SearchForm.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\n\n// Icons - Import from icons in the Martyrs framework\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';\n\n// Import store modules\nimport { state as playerState } from '../../store/player.js';\nimport { state as authState, actions as authActions } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst router = useRouter();\n\n// UI state\nconst showUserMenu = ref(false);\n\n// Auth computed properties\nconst isAuthenticated = computed(() => {\n  return authState.access.status === true;\n});\n\nconst user = computed(() => {\n  return authState.user;\n});\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n\n// Methods\nconst handleSearch = (query) => {\n  router.push({ name: 'music-search', query: { q: query } });\n};\n\n</script>"],"names":["useRouter","ref","computed","authState","playerState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,UAAM,SAASA,UAAAA,UAAW;AAGLC,QAAAA,IAAI,KAAK;AAGNC,QAAAA,SAAS,MAAM;AACrC,aAAOC,KAAS,MAAC,OAAO,WAAW;AAAA,IACrC,CAAC;AAEYD,QAAAA,SAAS,MAAM;AAC1B,aAAOC,KAAS,MAAC;AAAA,IACnB,CAAC;AAGD,UAAM,eAAeD,IAAQ,SAAC,MAAM;AAClC,aAAOE,OAAW,MAAC;AAAA,IACrB,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,aAAO,KAAK,EAAE,MAAM,gBAAgB,OAAO,EAAE,GAAG,MAAK,GAAI;AAAA,IAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/layouts/MusicLayout.vue.js

@@ -0,0 +1,104 @@
+import { ref, computed, resolveComponent, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, createVNode, withCtx, createTextVNode } from "vue";
+import { useRouter } from "vue-router";
+import MusicPlayer from "../player/MusicPlayer.vue.js";
+import SearchForm from "../forms/SearchForm.vue.js";
+/* empty css                                       */
+/* empty css                                        */
+/* empty css                                            */
+import IconChevronLeft from "../../../icons/navigation/IconChevronLeft.vue.js";
+import IconChevronRight from "../../../icons/navigation/IconChevronRight.vue.js";
+import { state as state$1 } from "../../store/player.js";
+import { state } from "../../../auth/views/store/auth.js";
+const _hoisted_1 = { class: "music-layout flex flex-column flex-nowrap w-100" };
+const _hoisted_2 = { class: "flex-child-shrink-0 z-index-3 flex-v-center flex-justify-between flex gap-small pd-small bg-main" };
+const _hoisted_3 = { class: "music-navigation-buttons flex gap-thin" };
+const _hoisted_4 = {
+  key: 0,
+  class: "music-search-bar flex-child-1 mn-l-medium mn-r-medium"
+};
+const _hoisted_5 = { class: "music-user-menu flex-nowrap flex pos-relative" };
+const _hoisted_6 = { class: "o-x-hidden" };
+const _sfc_main = {
+  __name: "MusicLayout",
+  setup(__props) {
+    const router = useRouter();
+    ref(false);
+    computed(() => {
+      return state.access.status === true;
+    });
+    computed(() => {
+      return state.user;
+    });
+    const currentTrack = computed(() => {
+      return state$1.currentTrack;
+    });
+    const handleSearch = (query) => {
+      router.push({ name: "music-search", query: { q: query } });
+    };
+    return (_ctx, _cache) => {
+      const _component_router_link = resolveComponent("router-link");
+      const _component_router_view = resolveComponent("router-view");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("header", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("button", {
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.go(-1)),
+              class: "bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro"
+            }, [
+              createVNode(IconChevronLeft, {
+                class: "i-small",
+                fill: "rgb(var(--white))"
+              })
+            ]),
+            createElementVNode("button", {
+              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$router.go(1)),
+              class: "bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro"
+            }, [
+              createVNode(IconChevronRight, {
+                class: "i-small",
+                fill: "rgb(var(--white))"
+              })
+            ])
+          ]),
+          _ctx.$route.name !== "music-search" ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createVNode(SearchForm, {
+              onSearch: handleSearch,
+              placeholder: "Search music..."
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_5, [
+            createVNode(_component_router_link, {
+              to: { name: "music-library" },
+              class: "pd-thin w-100 d-block hover-bg-dark radius-small"
+            }, {
+              default: withCtx(() => _cache[2] || (_cache[2] = [
+                createTextVNode(" Library ")
+              ])),
+              _: 1
+            }),
+            createVNode(_component_router_link, {
+              to: { name: "track-create" },
+              class: "pd-thin w-100 d-block hover-bg-dark radius-small"
+            }, {
+              default: withCtx(() => _cache[3] || (_cache[3] = [
+                createTextVNode(" Upload ")
+              ])),
+              _: 1
+            })
+          ])
+        ]),
+        createElementVNode("main", _hoisted_6, [
+          createVNode(_component_router_view)
+        ]),
+        currentTrack.value ? (openBlock(), createBlock(MusicPlayer, {
+          key: 0,
+          class: "pos-fixed pos-b-0 w-100"
+        })) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=MusicLayout.vue.js.map

package/dist/martyrs/src/modules/music/components/layouts/MusicLayout.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MusicLayout.vue.js","sources":["../../../../../../../src/modules/music/components/layouts/MusicLayout.vue"],"sourcesContent":["<!-- components/layouts/MusicLayout.vue -->\n<template>\n  <div class=\"music-layout flex flex-column flex-nowrap w-100 \">\n    <!-- Header Bar -->\n    <header class=\"flex-child-shrink-0 z-index-3 flex-v-center flex-justify-between flex gap-small pd-small bg-main\">\n \n      <div class=\"music-navigation-buttons flex gap-thin\">\n        <button @click=\"$router.go(-1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronLeft class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n        <button @click=\"$router.go(1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronRight class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n      </div>\n    \n      <div class=\"music-search-bar flex-child-1 mn-l-medium mn-r-medium\" v-if=\"$route.name !== 'music-search'\">\n        <SearchForm @search=\"handleSearch\" placeholder=\"Search music...\" />\n      </div>\n      \n      <div class=\"music-user-menu flex-nowrap  flex pos-relative\">\n \n        <router-link :to=\"{ name: 'music-library' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Library\n        </router-link>\n        <router-link :to=\"{ name: 'track-create' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Upload\n        </router-link>\n        \n      </div>\n    </header>\n    \n    <!-- Main Content Area -->\n    <main class=\"o-x-hidden\">\n      <router-view></router-view>\n    </main>\n    \n    <!-- Music Player Fixed at Bottom -->\n    <MusicPlayer v-if=\"currentTrack\" class=\"pos-fixed pos-b-0 w-100 \"/>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter } from 'vue-router';\nimport MusicPlayer from '../player/MusicPlayer.vue';\nimport SearchForm from '../forms/SearchForm.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\n\n// Icons - Import from icons in the Martyrs framework\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';\n\n// Import store modules\nimport { state as playerState } from '../../store/player.js';\nimport { state as authState, actions as authActions } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst router = useRouter();\n\n// UI state\nconst showUserMenu = ref(false);\n\n// Auth computed properties\nconst isAuthenticated = computed(() => {\n  return authState.access.status === true;\n});\n\nconst user = computed(() => {\n  return authState.user;\n});\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n\n// Methods\nconst handleSearch = (query) => {\n  router.push({ name: 'music-search', query: { q: query } });\n};\n\n</script>"],"names":["authState","playerState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0DA,UAAM,SAAS,UAAW;AAGL,QAAI,KAAK;AAGN,aAAS,MAAM;AACrC,aAAOA,MAAU,OAAO,WAAW;AAAA,IACrC,CAAC;AAEY,aAAS,MAAM;AAC1B,aAAOA,MAAU;AAAA,IACnB,CAAC;AAGD,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOC,QAAY;AAAA,IACrB,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,aAAO,KAAK,EAAE,MAAM,gBAAgB,OAAO,EAAE,GAAG,MAAK,GAAI;AAAA,IAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,314 @@
+"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 Button = require("../../../../components/Button/Button.vue.cjs");
+const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
+const Media = require("../../../../components/Media/Media.vue.cjs");
+const Dropdown = require("../../../../components/Dropdown/Dropdown.vue.cjs");
+const IconPlay = require("../../../icons/navigation/IconPlay.vue.cjs");
+const IconLike = require("../../../icons/navigation/IconLike.vue.cjs");
+const IconEllipsis = require("../../../icons/navigation/IconEllipsis.vue.cjs");
+const albums = require("../../store/albums.cjs");
+const player = require("../../store/player.cjs");
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = { class: "album-page" };
+const _hoisted_2 = {
+  key: 0,
+  class: "w-100 h-25r flex-center flex"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "t-center pd-big"
+};
+const _hoisted_4 = { key: 2 };
+const _hoisted_5 = { class: "album-header mn-b-medium flex flex-v-center gap-medium" };
+const _hoisted_6 = { class: "album-cover" };
+const _hoisted_7 = { class: "album-info" };
+const _hoisted_8 = { class: "" };
+const _hoisted_9 = { class: "album-meta mn-t-small flex flex-v-center" };
+const _hoisted_10 = {
+  key: 1,
+  class: "t-medium"
+};
+const _hoisted_11 = { class: "t-grey" };
+const _hoisted_12 = { class: "t-grey" };
+const _hoisted_13 = { class: "album-actions mn-b-medium flex flex-v-center gap-small" };
+const _hoisted_14 = {
+  key: 0,
+  class: "pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin"
+};
+const _hoisted_15 = { class: "mn-b-thin" };
+const _hoisted_16 = { class: "album-tracks" };
+const _hoisted_17 = {
+  key: 0,
+  class: "album-description mn-t-medium pd-medium bg-dark-transp-10 radius-medium"
+};
+const _hoisted_18 = { class: "t-grey" };
+const _hoisted_19 = {
+  key: 1,
+  class: "more-from-artist mn-t-medium"
+};
+const _hoisted_20 = { class: "flex-between flex mn-b-small" };
+const _hoisted_21 = { class: "" };
+const _hoisted_22 = { class: "albums-grid cols-5 mobile:cols-2 gap-small" };
+const _sfc_main = {
+  __name: "Album",
+  setup(__props) {
+    const route = vueRouter.useRoute();
+    vueRouter.useRouter();
+    const isLoading = vue.ref(true);
+    const isFavorite = vue.ref(false);
+    const showDropdown = vue.ref(false);
+    const moreFromArtist = vue.ref([]);
+    const album = vue.computed(() => albums.state.currentAlbum);
+    const albumTracks = vue.computed(() => albums.state.currentAlbumTracks);
+    const getArtistName = (albumItem) => {
+      if (!albumItem) return "Unknown Artist";
+      if (albumItem.artist) {
+        if (typeof albumItem.artist === "object") {
+          return albumItem.artist.name || "Unknown Artist";
+        }
+        return albumItem.artist;
+      }
+      return "Unknown Artist";
+    };
+    const formatReleaseYear = (dateString) => {
+      if (!dateString) return "";
+      return new Date(dateString).getFullYear();
+    };
+    const playAlbum = () => {
+      if (albumTracks.value && albumTracks.value.length > 0) {
+        player.actions.setQueue(albumTracks.value);
+      }
+    };
+    const toggleFavorite = () => {
+      isFavorite.value = !isFavorite.value;
+    };
+    const addToQueue = () => {
+      if (albumTracks.value && albumTracks.value.length > 0) {
+        albumTracks.value.forEach((track) => {
+          player.actions.addToQueue(track);
+        });
+        showDropdown.value = false;
+      }
+    };
+    const copyLink = () => {
+      const url = window.location.href;
+      navigator.clipboard.writeText(url).then(() => {
+        showDropdown.value = false;
+      });
+    };
+    const fetchAlbumData = async () => {
+      var _a, _b;
+      isLoading.value = true;
+      try {
+        await albums.actions.fetchAlbumByUrl(route.params.url);
+        if ((_b = (_a = album.value) == null ? void 0 : _a.artist) == null ? void 0 : _b._id) {
+          const artistAlbums = await albums.actions.fetchAlbums({
+            artist: album.value.artist._id,
+            status: "published",
+            isPublic: true,
+            limit: 5
+          });
+          moreFromArtist.value = artistAlbums.filter((a) => a._id !== album.value._id);
+        }
+      } catch (error) {
+        console.error("Error fetching album data:", error);
+      } finally {
+        isLoading.value = false;
+      }
+    };
+    vue.onMounted(fetchAlbumData);
+    vue.watch(() => route.params.url, (newUrl) => {
+      if (newUrl) {
+        fetchAlbumData();
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_router_link = vue.resolveComponent("router-link");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.createVNode(Loader.default)
+        ])) : !album.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _cache[1] || (_cache[1] = [
+          vue.createElementVNode("h2", { class: "" }, "Album not found", -1),
+          vue.createElementVNode("p", { class: "t-grey t-medium" }, "The album you're looking for doesn't exist or has been removed.", -1)
+        ]))) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.createElementVNode("div", _hoisted_5, [
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createVNode(Media.default, {
+                url: album.value.coverUrl || "/assets/placeholder-album.jpg",
+                class: "w-15r h-15r object-fit-cover shadow-lg radius-small"
+              }, null, 8, ["url"])
+            ]),
+            vue.createElementVNode("div", _hoisted_7, [
+              _cache[4] || (_cache[4] = vue.createElementVNode("div", { class: "t-small t-uppercase" }, "Album", -1)),
+              vue.createElementVNode("h1", _hoisted_8, vue.toDisplayString(album.value.title), 1),
+              vue.createElementVNode("div", _hoisted_9, [
+                album.value.artist && album.value.artist._id ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                  key: 0,
+                  to: { name: "artist", params: { url: album.value.artist.url } },
+                  class: "t-medium hover-t-main"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(getArtistName(album.value)), 1)
+                  ]),
+                  _: 1
+                }, 8, ["to"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_10, vue.toDisplayString(getArtistName(album.value)), 1)),
+                _cache[2] || (_cache[2] = vue.createElementVNode("span", { class: "t-grey mn-l-small mn-r-small" }, "•", -1)),
+                vue.createElementVNode("span", _hoisted_11, vue.toDisplayString(formatReleaseYear(album.value.releaseDate)), 1),
+                _cache[3] || (_cache[3] = vue.createElementVNode("span", { class: "t-grey mn-l-small mn-r-small" }, "•", -1)),
+                vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(albumTracks.value.length) + " " + vue.toDisplayString(albumTracks.value.length === 1 ? "song" : "songs"), 1)
+              ])
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_13, [
+            vue.createVNode(Button.default, {
+              onClick: playAlbum,
+              class: "play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(IconPlay.default, {
+                  class: "i-small",
+                  fill: "rgb(var(--black))"
+                }),
+                _cache[5] || (_cache[5] = vue.createElementVNode("span", { class: "t-black t-medium" }, "Play", -1))
+              ]),
+              _: 1
+            }),
+            vue.createVNode(Button.default, {
+              onClick: toggleFavorite,
+              class: "bg-transparent border-none pd-zero",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(IconLike.default, {
+                  class: "i-medium",
+                  fill: isFavorite.value ? "rgb(var(--main))" : "rgb(var(--white))"
+                }, null, 8, ["fill"])
+              ]),
+              _: 1
+            }),
+            vue.createVNode(Dropdown.default, { class: "pos-relative" }, {
+              content: vue.withCtx(() => [
+                showDropdown.value ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_14, [
+                  vue.createElementVNode("li", _hoisted_15, [
+                    vue.createVNode(Button.default, {
+                      onClick: addToQueue,
+                      class: "bg-transparent border-none pd-thin w-100 t-left hover-bg-dark radius-small",
+                      showLoader: false,
+                      showSucces: false
+                    }, {
+                      default: vue.withCtx(() => _cache[6] || (_cache[6] = [
+                        vue.createElementVNode("span", null, "Add to Queue", -1)
+                      ])),
+                      _: 1
+                    })
+                  ]),
+                  vue.createElementVNode("li", null, [
+                    vue.createVNode(Button.default, {
+                      onClick: copyLink,
+                      class: "bg-transparent border-none pd-thin w-100 t-left hover-bg-dark radius-small",
+                      showLoader: false,
+                      showSucces: false
+                    }, {
+                      default: vue.withCtx(() => _cache[7] || (_cache[7] = [
+                        vue.createElementVNode("span", null, "Copy Link", -1)
+                      ])),
+                      _: 1
+                    })
+                  ])
+                ])) : vue.createCommentVNode("", true)
+              ]),
+              default: vue.withCtx(() => [
+                vue.createVNode(Button.default, {
+                  onClick: _cache[0] || (_cache[0] = ($event) => showDropdown.value = !showDropdown.value),
+                  class: "bg-transparent border-none pd-zero",
+                  showLoader: false,
+                  showSucces: false
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(IconEllipsis.default, {
+                      class: "i-medium",
+                      fill: "rgb(var(--white))"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          vue.createElementVNode("div", _hoisted_16, [
+            vue.createVNode(Feed.default, {
+              store: {
+                read: () => _ctx.Promise.resolve(albumTracks.value),
+                state: { isLoading: false }
+              },
+              external: true,
+              items: albumTracks.value,
+              states: {
+                empty: {
+                  title: "No tracks in album",
+                  description: "This album appears to be empty",
+                  class: "pd-medium bg-dark-transp-10 radius-medium"
+                }
+              },
+              class: "gap-thin"
+            }, {
+              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: false,
+                    showCover: false,
+                    class: "w-100 bg-dark-transp-10 radius-medium"
+                  }, null, 8, ["track"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["store", "items"])
+          ]),
+          album.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, [
+            _cache[8] || (_cache[8] = vue.createElementVNode("h3", { class: "mn-b-small" }, "About", -1)),
+            vue.createElementVNode("p", _hoisted_18, vue.toDisplayString(album.value.description), 1)
+          ])) : vue.createCommentVNode("", true),
+          moreFromArtist.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19, [
+            vue.createElementVNode("div", _hoisted_20, [
+              vue.createElementVNode("h2", _hoisted_21, "More by " + vue.toDisplayString(getArtistName(album.value)), 1),
+              album.value.artist && album.value.artist._id ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                key: 0,
+                to: { name: "artist", params: { url: album.value.artist.url } },
+                class: "t-main t-small hover-opacity"
+              }, {
+                default: vue.withCtx(() => _cache[9] || (_cache[9] = [
+                  vue.createTextVNode(" See all ")
+                ])),
+                _: 1
+              }, 8, ["to"])) : vue.createCommentVNode("", true)
+            ]),
+            vue.createElementVNode("div", _hoisted_22, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(moreFromArtist.value, (relatedAlbum) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: relatedAlbum._id
+                }, [
+                  vue.createVNode(AlbumCard.default, { album: relatedAlbum }, null, 8, ["album"])
+                ]);
+              }), 128))
+            ])
+          ])) : vue.createCommentVNode("", true)
+        ]))
+      ]);
+    };
+  }
+};
+const Album = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-ecbc3f9a"]]);
+exports.default = Album;
+//# sourceMappingURL=Album.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Album.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Album.vue"],"sourcesContent":["<!-- components/pages/Album.vue -->\n<template>\n  <div class=\"album-page\">\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n    \n    <div v-else-if=\"!album\" class=\"t-center pd-big\">\n      <h2 class=\"\">Album not found</h2>\n      <p class=\"t-grey t-medium\">The album you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <div v-else>\n      <!-- Album Header -->\n      <div class=\"album-header mn-b-medium flex flex-v-center gap-medium\">\n        <div class=\"album-cover\">\n          <Media \n            :url=\"album.coverUrl || '/assets/placeholder-album.jpg'\" \n            class=\"w-15r h-15r object-fit-cover shadow-lg radius-small\"\n          />\n        </div>\n        \n        <div class=\"album-info\">\n          <div class=\"t-small t-uppercase \">Album</div>\n          <h1 class=\"\">{{ album.title }}</h1>\n          \n          <div class=\"album-meta mn-t-small flex flex-v-center\">\n            <router-link \n              v-if=\"album.artist && album.artist._id\"\n              :to=\"{ name: 'artist', params: { url: album.artist.url } }\"\n              class=\" t-medium hover-t-main\"\n            >\n              {{ getArtistName(album) }}\n            </router-link>\n            <span v-else class=\" t-medium\">{{ getArtistName(album) }}</span>\n            \n            <span class=\"t-grey mn-l-small mn-r-small\">•</span>\n            \n            <span class=\"t-grey\">{{ formatReleaseYear(album.releaseDate) }}</span>\n            \n            <span class=\"t-grey mn-l-small mn-r-small\">•</span>\n            \n            <span class=\"t-grey\">{{ albumTracks.length }} {{ albumTracks.length === 1 ? 'song' : 'songs' }}</span>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Album Actions -->\n      <div class=\"album-actions mn-b-medium flex flex-v-center gap-small\">\n        <Button \n          @click=\"playAlbum\"\n          class=\"play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\"/>\n          <span class=\"t-black t-medium\">Play</span>\n        </Button>\n        \n        <Button \n          @click=\"toggleFavorite\"\n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'\"/>\n        </Button>\n        \n        <Dropdown class=\"pos-relative\">\n          <Button \n            @click=\"showDropdown = !showDropdown\"\n            class=\"bg-transparent border-none pd-zero\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconEllipsis class=\"i-medium\" fill=\"rgb(var(--white))\"/>\n          </Button>\n          \n          <template #content>\n            <ul v-if=\"showDropdown\" class=\"pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin\">\n              <li class=\"mn-b-thin\">\n                <Button \n                  @click=\"addToQueue\"\n                  class=\"bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Add to Queue</span>\n                </Button>\n              </li>\n              <li>\n                <Button \n                  @click=\"copyLink\"\n                  class=\"bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Copy Link</span>\n                </Button>\n              </li>\n            </ul>\n          </template>\n        </Dropdown>\n      </div>\n      \n      <!-- Album Tracks -->\n      <div class=\"album-tracks\">\n        <Feed\n          :store=\"{\n            read: () => Promise.resolve(albumTracks),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"albumTracks\"\n          :states=\"{\n            empty: {\n              title: 'No tracks in album',\n              description: 'This album appears to be empty',\n              class: 'pd-medium bg-dark-transp-10 radius-medium'\n            }\n          }\"\n          class=\"gap-thin\"\n        >\n          <template #default=\"{ items }\">\n            <TrackCard\n              v-for=\"track in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :showAlbum=\"false\"\n              :showCover=\"false\"\n              class=\"w-100 bg-dark-transp-10 radius-medium\"\n            />\n          </template>\n        </Feed>\n      </div>\n      \n      <!-- Album Info -->\n      <div v-if=\"album.description\" class=\"album-description mn-t-medium pd-medium bg-dark-transp-10 radius-medium\">\n        <h3 class=\" mn-b-small\">About</h3>\n        <p class=\"t-grey\">{{ album.description }}</p>\n      </div>\n      \n      <!-- More from this artist if available -->\n      <div v-if=\"moreFromArtist.length > 0\" class=\"more-from-artist mn-t-medium\">\n        <div class=\"flex-between flex mn-b-small\">\n          <h2 class=\"\">More by {{ getArtistName(album) }}</h2>\n          <router-link \n            v-if=\"album.artist && album.artist._id\"\n            :to=\"{ name: 'artist', params: { url: album.artist.url } }\" \n            class=\"t-main t-small hover-opacity\"\n          >\n            See all\n          </router-link>\n        </div>\n        \n        <div class=\"albums-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"relatedAlbum in moreFromArtist\" :key=\"relatedAlbum._id\">\n            <AlbumCard :album=\"relatedAlbum\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, 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 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';\n\n// Import 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';\n\n// Import store modules\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { actions as playerActions } from '../../store/player.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// State\nconst isLoading = ref(true);\nconst isFavorite = ref(false);\nconst showDropdown = ref(false);\nconst moreFromArtist = ref([]);\n\n// Computed properties\nconst album = computed(() => albumsState.currentAlbum);\nconst albumTracks = computed(() => albumsState.currentAlbumTracks);\n\n// Methods\nconst getArtistName = (albumItem) => {\n  if (!albumItem) return 'Unknown Artist';\n  \n  if (albumItem.artist) {\n    if (typeof albumItem.artist === 'object') {\n      return albumItem.artist.name || 'Unknown Artist';\n    }\n    return albumItem.artist;\n  }\n  return 'Unknown Artist';\n};\n\nconst formatReleaseYear = (dateString) => {\n  if (!dateString) return '';\n  return new Date(dateString).getFullYear();\n};\n\nconst playAlbum = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    playerActions.setQueue(albumTracks.value);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // Implement favorite album logic here\n};\n\nconst addToQueue = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    // Add all tracks to queue\n    albumTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    \n    showDropdown.value = false;\n  }\n};\n\nconst copyLink = () => {\n  const url = window.location.href;\n  navigator.clipboard.writeText(url).then(() => {\n    // Could show a success notification here\n    showDropdown.value = false;\n  });\n};\n\nconst fetchAlbumData = async () => {\n  isLoading.value = true;\n  \n  try {\n    // Fetch album data\n    await albumsActions.fetchAlbumByUrl(route.params.url);\n    \n    // If artist is available, fetch more albums from the same artist\n    if (album.value?.artist?._id) {\n      const artistAlbums = await albumsActions.fetchAlbums({\n        artist: album.value.artist._id,\n        status: 'published',\n        isPublic: true,\n        limit: 5\n      });\n      \n      // Filter out the current album\n      moreFromArtist.value = artistAlbums.filter(a => a._id !== album.value._id);\n    }\n  } catch (error) {\n    console.error('Error fetching album data:', error);\n  } finally {\n    isLoading.value = false;\n  }\n};\n\n// Fetch data when component mounts or URL changes\nonMounted(fetchAlbumData);\n\nwatch(() => route.params.url, (newUrl) => {\n  if (newUrl) {\n    fetchAlbumData();\n  }\n});\n</script>\n\n<style scoped>\n.album-cover {\n  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);\n}\n</style>"],"names":["useRoute","useRouter","ref","computed","albumsState","playerActions","albumsActions","onMounted","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyLA,UAAM,QAAQA,UAAAA,SAAU;AACTC,cAAS,UAAA;AAGxB,UAAM,YAAYC,IAAG,IAAC,IAAI;AAC1B,UAAM,aAAaA,IAAG,IAAC,KAAK;AAC5B,UAAM,eAAeA,IAAG,IAAC,KAAK;AAC9B,UAAM,iBAAiBA,IAAG,IAAC,EAAE;AAG7B,UAAM,QAAQC,IAAQ,SAAC,MAAMC,OAAW,MAAC,YAAY;AACrD,UAAM,cAAcD,IAAQ,SAAC,MAAMC,OAAW,MAAC,kBAAkB;AAGjE,UAAM,gBAAgB,CAAC,cAAc;AACnC,UAAI,CAAC,UAAW,QAAO;AAEvB,UAAI,UAAU,QAAQ;AACpB,YAAI,OAAO,UAAU,WAAW,UAAU;AACxC,iBAAO,UAAU,OAAO,QAAQ;AAAA,QACtC;AACI,eAAO,UAAU;AAAA,MACrB;AACE,aAAO;AAAA,IACT;AAEA,UAAM,oBAAoB,CAAC,eAAe;AACxC,UAAI,CAAC,WAAY,QAAO;AACxB,aAAO,IAAI,KAAK,UAAU,EAAE,YAAa;AAAA,IAC3C;AAEA,UAAM,YAAY,MAAM;AACtB,UAAI,YAAY,SAAS,YAAY,MAAM,SAAS,GAAG;AACrDC,uBAAc,SAAS,YAAY,KAAK;AAAA,MAC5C;AAAA,IACA;AAEA,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IAEjC;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,YAAY,SAAS,YAAY,MAAM,SAAS,GAAG;AAErD,oBAAY,MAAM,QAAQ,WAAS;AACjCA,iBAAa,QAAC,WAAW,KAAK;AAAA,QACpC,CAAK;AAED,qBAAa,QAAQ;AAAA,MACzB;AAAA,IACA;AAEA,UAAM,WAAW,MAAM;AACrB,YAAM,MAAM,OAAO,SAAS;AAC5B,gBAAU,UAAU,UAAU,GAAG,EAAE,KAAK,MAAM;AAE5C,qBAAa,QAAQ;AAAA,MACzB,CAAG;AAAA,IACH;AAEA,UAAM,iBAAiB,YAAY;;AACjC,gBAAU,QAAQ;AAElB,UAAI;AAEF,cAAMC,OAAa,QAAC,gBAAgB,MAAM,OAAO,GAAG;AAGpD,aAAI,iBAAM,UAAN,mBAAa,WAAb,mBAAqB,KAAK;AAC5B,gBAAM,eAAe,MAAMA,OAAa,QAAC,YAAY;AAAA,YACnD,QAAQ,MAAM,MAAM,OAAO;AAAA,YAC3B,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,OAAO;AAAA,UACf,CAAO;AAGD,yBAAe,QAAQ,aAAa,OAAO,OAAK,EAAE,QAAQ,MAAM,MAAM,GAAG;AAAA,QAC/E;AAAA,MACG,SAAQ,OAAO;AACd,gBAAQ,MAAM,8BAA8B,KAAK;AAAA,MACrD,UAAY;AACR,kBAAU,QAAQ;AAAA,MACtB;AAAA,IACA;AAGAC,QAAS,UAAC,cAAc;AAExBC,QAAK,MAAC,MAAM,MAAM,OAAO,KAAK,CAAC,WAAW;AACxC,UAAI,QAAQ;AACV,uBAAgB;AAAA,MACpB;AAAA,IACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}