@ozdao/martyrs 0.2.565 → 0.2.567

package/dist/martyrs/src/modules/events/events.client.js

@@ -1,15 +1,16 @@
 import addRoutes from "../core/views/router/addRoutes.js";
 import * as events from "./store/events.js";
 import { getRoutes } from "./router/events.router.js";
-import _sfc_main$7 from "./components/blocks/CardEvent.vue.js";
-import _sfc_main$6 from "./components/blocks/CardEventShort.vue.js";
+import _sfc_main$8 from "./components/blocks/CardEvent.vue.js";
+import _sfc_main$7 from "./components/blocks/CardEventShort.vue.js";
 import _sfc_main$3 from "./components/layouts/layoutEvents.vue.js";
 import _sfc_main$2 from "./components/pages/EditEvent.vue.js";
 import _sfc_main$1 from "./components/pages/Event.vue.js";
 import _sfc_main from "./components/pages/Events.vue.js";
 import FeaturedEvents from "./components/sections/FeaturedEvents.vue.js";
-import _sfc_main$5 from "./components/sections/Feed.vue.js";
-import _sfc_main$4 from "./components/sections/List.vue.js";
+import _sfc_main$4 from "./components/sections/EventsHot.vue.js";
+import _sfc_main$6 from "./components/sections/Feed.vue.js";
+import _sfc_main$5 from "./components/sections/List.vue.js";
 function initializeEvents(app, store, router, options = {}) {
   const routes = getRoutes(options);
   routes.forEach(({ parentName, config }) => {
@@ -28,12 +29,13 @@ const ModuleEvents = {
     },
     components: {
       // Blocks
-      CardEvent: _sfc_main$7,
-      CardEventShort: _sfc_main$6,
+      CardEvent: _sfc_main$8,
+      CardEventShort: _sfc_main$7,
       // Sections
-      Feed: _sfc_main$5,
-      List: _sfc_main$4,
+      Feed: _sfc_main$6,
+      List: _sfc_main$5,
       FeaturedEvents,
+      EventsHot: _sfc_main$4,
       // Layouts
       EventsLayout: _sfc_main$3,
       // Pages
@@ -44,15 +46,16 @@ const ModuleEvents = {
   }
 };
 export {
-  _sfc_main$7 as CardEvent,
-  _sfc_main$6 as CardEventShort,
+  _sfc_main$8 as CardEvent,
+  _sfc_main$7 as CardEventShort,
   _sfc_main$2 as EditEvent,
   _sfc_main$1 as Event,
+  _sfc_main$4 as EventsHot,
   _sfc_main$3 as EventsLayout,
   _sfc_main as EventsPage,
   FeaturedEvents,
-  _sfc_main$5 as Feed,
-  _sfc_main$4 as List,
+  _sfc_main$6 as Feed,
+  _sfc_main$5 as List,
   ModuleEvents as default,
   getRoutes,
   initializeEvents,

package/dist/martyrs/src/modules/events/events.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.client.js","sources":["../../../../../src/modules/events/events.client.js"],"sourcesContent":["import addRoutes from '@martyrs/src/modules/core/views/router/addRoutes.js';\n\n// Store\nimport * as storeEvents from './store/events.js';\n\n// Router\nimport { getRoutes } from './router/events.router.js';\n\n// Views\nimport CardEvent from './components/blocks/CardEvent.vue';\nimport CardEventShort from './components/blocks/CardEventShort.vue';\nimport EventsLayout from './components/layouts/layoutEvents.vue';\nimport EditEvent from './components/pages/EditEvent.vue';\nimport Event from './components/pages/Event.vue';\nimport EventsPage from './components/pages/Events.vue';\nimport FeaturedEvents from './components/sections/FeaturedEvents.vue';\nimport Feed from './components/sections/Feed.vue';\nimport List from './components/sections/List.vue';\n\n// Пример функции инициализации для модуля событий\nfunction initializeEvents(app, store, router, options = {}) {\n  const routes = getRoutes(options);\n  routes.forEach(({ parentName, config }) => {\n    addRoutes(router, { ...config, parentName });\n  });\n\n  store.addStore('events', storeEvents);\n}\n\nconst ModuleEvents = {\n  initialize: initializeEvents,\n  views: {\n    store: {\n      storeEvents,\n    },\n    router: {\n      getRoutes,\n    },\n    components: {\n      // Blocks\n      CardEvent,\n      CardEventShort,\n      // Sections\n      Feed,\n      List,\n      FeaturedEvents,\n      // Layouts\n      EventsLayout,\n      // Pages\n      EditEvent,\n      Event,\n      EventsPage,\n    },\n  },\n};\n\nexport {\n  // Blocks\n  CardEvent,\n  CardEventShort,\n  getRoutes,\n  EditEvent,\n  Event,\n  EventsLayout,\n  EventsPage,\n  FeaturedEvents,\n  Feed,\n  initializeEvents,\n  List,\n  storeEvents,\n};\n\nexport default ModuleEvents;\n"],"names":["storeEvents","CardEvent","CardEventShort","Feed","List","EventsLayout","EditEvent","Event","EventsPage"],"mappings":";;;;;;;;;;;;AAoBA,SAAS,iBAAiB,KAAK,OAAO,QAAQ,UAAU,CAAA,GAAI;AAC1D,QAAM,SAAS,UAAU,OAAO;AAChC,SAAO,QAAQ,CAAC,EAAE,YAAY,OAAM,MAAO;AACzC,cAAU,QAAQ,EAAE,GAAG,QAAQ,WAAU,CAAE;AAAA,EAC7C,CAAC;AAED,QAAM,SAAS,UAAUA,MAAW;AACtC;AAEK,MAAC,eAAe;AAAA,EACnB,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,OAAO;AAAA,MACX,aAAMA;AAAAA,IACN;AAAA,IACI,QAAQ;AAAA,MACN;AAAA,IACN;AAAA,IACI,YAAY;AAAA;AAAA,MAEhB,WAAMC;AAAAA,MACN,gBAAMC;AAAAA;AAAAA,MAEN,MAAMC;AAAAA,MACN,MAAMC;AAAAA,MACA;AAAA;AAAA,MAEN,cAAMC;AAAAA;AAAAA,MAEN,WAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,YAAMC;AAAAA,IACN;AAAA,EACA;AACA;"}
+{"version":3,"file":"events.client.js","sources":["../../../../../src/modules/events/events.client.js"],"sourcesContent":["import addRoutes from '@martyrs/src/modules/core/views/router/addRoutes.js';\n\n// Store\nimport * as storeEvents from './store/events.js';\n\n// Router\nimport { getRoutes } from './router/events.router.js';\n\n// Views\nimport CardEvent from './components/blocks/CardEvent.vue';\nimport CardEventShort from './components/blocks/CardEventShort.vue';\nimport EventsLayout from './components/layouts/layoutEvents.vue';\nimport EditEvent from './components/pages/EditEvent.vue';\nimport Event from './components/pages/Event.vue';\nimport EventsPage from './components/pages/Events.vue';\nimport FeaturedEvents from './components/sections/FeaturedEvents.vue';\nimport EventsHot from './components/sections/EventsHot.vue';\nimport Feed from './components/sections/Feed.vue';\nimport List from './components/sections/List.vue';\n\n// Пример функции инициализации для модуля событий\nfunction initializeEvents(app, store, router, options = {}) {\n  const routes = getRoutes(options);\n  routes.forEach(({ parentName, config }) => {\n    addRoutes(router, { ...config, parentName });\n  });\n\n  store.addStore('events', storeEvents);\n}\n\nconst ModuleEvents = {\n  initialize: initializeEvents,\n  views: {\n    store: {\n      storeEvents,\n    },\n    router: {\n      getRoutes,\n    },\n    components: {\n      // Blocks\n      CardEvent,\n      CardEventShort,\n      // Sections\n      Feed,\n      List,\n      FeaturedEvents,\n      EventsHot,\n      // Layouts\n      EventsLayout,\n      // Pages\n      EditEvent,\n      Event,\n      EventsPage,\n    },\n  },\n};\n\nexport {\n  // Blocks\n  CardEvent,\n  CardEventShort,\n  getRoutes,\n  EditEvent,\n  Event,\n  EventsLayout,\n  EventsPage,\n  FeaturedEvents,\n  EventsHot,\n  Feed,\n  initializeEvents,\n  List,\n  storeEvents,\n};\n\nexport default ModuleEvents;\n"],"names":["storeEvents","CardEvent","CardEventShort","Feed","List","EventsHot","EventsLayout","EditEvent","Event","EventsPage"],"mappings":";;;;;;;;;;;;;AAqBA,SAAS,iBAAiB,KAAK,OAAO,QAAQ,UAAU,CAAA,GAAI;AAC1D,QAAM,SAAS,UAAU,OAAO;AAChC,SAAO,QAAQ,CAAC,EAAE,YAAY,OAAM,MAAO;AACzC,cAAU,QAAQ,EAAE,GAAG,QAAQ,WAAU,CAAE;AAAA,EAC7C,CAAC;AAED,QAAM,SAAS,UAAUA,MAAW;AACtC;AAEK,MAAC,eAAe;AAAA,EACnB,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,OAAO;AAAA,MACX,aAAMA;AAAAA,IACN;AAAA,IACI,QAAQ;AAAA,MACN;AAAA,IACN;AAAA,IACI,YAAY;AAAA;AAAA,MAEhB,WAAMC;AAAAA,MACN,gBAAMC;AAAAA;AAAAA,MAEN,MAAMC;AAAAA,MACN,MAAMC;AAAAA,MACA;AAAA,MACN,WAAMC;AAAAA;AAAAA,MAEN,cAAMC;AAAAA;AAAAA,MAEN,WAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,YAAMC;AAAAA,IACN;AAAA,EACA;AACA;"}

package/dist/martyrs/src/modules/music/components/blocks/ActionButtons.vue.js

@@ -0,0 +1,95 @@
+import { ref, createElementBlock, openBlock, Fragment, renderList, createBlock, normalizeClass, withCtx, createCommentVNode, createTextVNode, resolveDynamicComponent, toDisplayString, createElementVNode, createVNode } from "vue";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
+import _sfc_main$2 from "../../../../components/Dropdown/Dropdown.vue.js";
+import _sfc_main$3 from "../../../icons/navigation/IconEllipsis.vue.js";
+const _hoisted_1 = { class: "flex gap-small mn-b-medium" };
+const _hoisted_2 = { class: "dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin" };
+const _hoisted_3 = {
+  key: 0,
+  class: "mn-v-thin border-dark-transp-10"
+};
+const _sfc_main = {
+  __name: "ActionButtons",
+  props: {
+    buttons: {
+      type: Array,
+      required: true
+    }
+  },
+  setup(__props) {
+    const dropdownOpen = ref(false);
+    const handleDropdownClick = (action) => {
+      if (action) {
+        action();
+      }
+      dropdownOpen.value = false;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttons, (button, index) => {
+          return openBlock(), createElementBlock(Fragment, { key: index }, [
+            button.type !== "dropdown" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              class: normalizeClass(["flex-1 radius-thin flex-center gap-thin", button.class]),
+              onClick: button.action
+            }, {
+              default: withCtx(() => [
+                button.icon ? (openBlock(), createBlock(resolveDynamicComponent(button.icon), {
+                  key: 0,
+                  fill: button.iconFill,
+                  class: "i-medium"
+                }, null, 8, ["fill"])) : createCommentVNode("", true),
+                createTextVNode(" " + toDisplayString(button.text), 1)
+              ]),
+              _: 2
+            }, 1032, ["class", "onClick"])) : (openBlock(), createBlock(_sfc_main$2, {
+              key: 1,
+              label: { component: _sfc_main$3, class: "bg-light radius-thin pd-thin i-big" },
+              modelValue: dropdownOpen.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dropdownOpen.value = $event),
+              class: "relative"
+            }, {
+              trigger: withCtx(() => [
+                createVNode(_sfc_main$1, {
+                  color: "transp",
+                  size: "medium",
+                  class: "w-3r h-3r radius-full"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$3, { class: "i-medium" })
+                  ]),
+                  _: 1
+                })
+              ]),
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_2, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(button.items, (item, idx) => {
+                    return openBlock(), createElementBlock(Fragment, { key: idx }, [
+                      item.separator ? (openBlock(), createElementBlock("hr", _hoisted_3)) : (openBlock(), createBlock(_sfc_main$1, {
+                        key: 1,
+                        onClick: ($event) => handleDropdownClick(item.action),
+                        color: item.color || "transp",
+                        size: "small",
+                        class: normalizeClass(["w-100 justify-start", item.class])
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(item.text), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick", "color", "class"]))
+                    ], 64);
+                  }), 128))
+                ])
+              ]),
+              _: 2
+            }, 1032, ["label", "modelValue"]))
+          ], 64);
+        }), 128))
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ActionButtons.vue.js.map

package/dist/martyrs/src/modules/music/components/blocks/ActionButtons.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtons.vue.js","sources":["../../../../../../../src/modules/music/components/blocks/ActionButtons.vue"],"sourcesContent":["<template>\n  <div class=\"flex gap-small mn-b-medium\">\n    <template v-for=\"(button, index) in buttons\" :key=\"index\">\n      <!-- Regular button -->\n      <Button\n        v-if=\"button.type !== 'dropdown'\"\n        :class=\"['flex-1 radius-thin flex-center gap-thin', button.class]\"\n        @click=\"button.action\"\n      >\n        <component\n          v-if=\"button.icon\"\n          :is=\"button.icon\"\n          :fill=\"button.iconFill\"\n          class=\"i-medium\"\n        />\n        {{ button.text }}\n      </Button>\n\n      <!-- Dropdown button -->\n      <Dropdown\n        v-else\n        :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\"\n        v-model=\"dropdownOpen\"\n        class=\"relative\"\n      >\n        <template #trigger>\n          <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n            <IconEllipsis class=\"i-medium\" />\n          </Button>\n        </template>\n        <template #default>\n          <div class=\"dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin\">\n            <template v-for=\"(item, idx) in button.items\" :key=\"idx\">\n              <hr v-if=\"item.separator\" class=\"mn-v-thin border-dark-transp-10\" />\n              <Button\n                v-else\n                @click=\"handleDropdownClick(item.action)\"\n                :color=\"item.color || 'transp'\"\n                size=\"small\"\n                class=\"w-100 justify-start\"\n                :class=\"item.class\"\n              >\n                {{ item.text }}\n              </Button>\n            </template>\n          </div>\n        </template>\n      </Dropdown>\n    </template>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\n\nconst props = defineProps({\n  buttons: {\n    type: Array,\n    required: true\n  }\n});\n\nconst dropdownOpen = ref(false);\n\nconst handleDropdownClick = (action) => {\n  if (action) {\n    action();\n  }\n  dropdownOpen.value = false;\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAiEA,UAAM,eAAe,IAAI,KAAK;AAE9B,UAAM,sBAAsB,CAAC,WAAW;AACtC,UAAI,QAAQ;AACV,eAAM;AAAA,MACR;AACA,mBAAa,QAAQ;AAAA,IACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/cards/AlbumCard.vue.js

@@ -12,7 +12,10 @@ const _hoisted_2 = {
   class: "album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out"
 };
 const _hoisted_3 = { class: "album-info pd-medium bg-light" };
-const _hoisted_4 = { class: "mn-b-thin t-medium t-truncate" };
+const _hoisted_4 = {
+  class: "mn-b-thin t-medium t-truncate",
+  style: { "height": "1.50rem" }
+};
 const _hoisted_5 = { class: "t-transp t-small t-truncate" };
 const _sfc_main = {
   __name: "AlbumCard",
@@ -87,7 +90,7 @@ const _sfc_main = {
     };
   }
 };
-const AlbumCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-faf7f060"]]);
+const AlbumCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7bd0bb4d"]]);
 export {
   AlbumCard as default
 };

package/dist/martyrs/src/modules/music/components/cards/AlbumCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlbumCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/AlbumCard.vue"],"sourcesContent":["<!-- components/cards/AlbumCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'album', params: { url: album.url } }\" \n    class=\"album-card d-block radius-medium o-hidden\"\n  >\n    <div class=\"album-cover pos-relative\">\n      <Media \n        :url=\"album.coverArt || album.coverUrl || '/logo/logo-placeholder.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div v-if=\"album.totalTracks && album.totalTracks > 0\" class=\"album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out\">\n        <Button \n          @click.stop.prevent=\"playAlbum(album)\" \n          class=\"play-button i-big bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--white))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"album-info pd-medium bg-light\">\n      <h3 class=\"mn-b-thin t-medium t-truncate\">{{ album.title }}</h3>\n      <p class=\"t-transp t-small t-truncate\">{{ albumInfo }}</p>\n    </div>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\n\n// Import player store & albums store\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\n\nconst props = defineProps({\n  album: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst albumInfo = computed(() => {\n  const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : '';\n  let artistName = 'Unknown Artist';\n  \n  // Handle artists array (model uses 'artists' not 'artist')\n  if (props.album.artists && props.album.artists.length > 0) {\n    // If populated, artists[0] will have name property\n    if (props.album.artists[0]?.name) {\n      artistName = props.album.artists.map(artist => artist.name).join(', ');\n    } else if (typeof props.album.artists[0] === 'string') {\n      // If not populated, it might be just IDs\n      artistName = 'Various Artists';\n    }\n  } else if (props.album.artist?.name) {\n    // Fallback for old data structure\n    artistName = props.album.artist.name;\n  }\n  \n  return releaseYear ? `${artistName} • ${releaseYear}` : artistName;\n});\n\n// Methods\nconst playAlbum = async (album) => {\n  // If album tracks are already loaded in state, use those\n  if (albumsState.currentAlbum && albumsState.currentAlbum._id === album._id && albumsState.currentAlbumTracks.length > 0) {\n    playerActions.setQueue(albumsState.currentAlbumTracks);\n    return;\n  }\n  \n  // Otherwise fetch tracks for this album\n  const tracks = await albumsActions.fetchAlbumTracks(album._id);\n  \n  if (tracks && tracks.length > 0) {\n    playerActions.setQueue(tracks);\n  }\n};\n</script>\n\n<style scoped>\n.album-card {\n  transition: transform 0.3s ease;\n}\n\n.album-card:hover {\n  transform: translateY(-5px);\n}\n\n.album-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.album-card:hover .album-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.album-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["albumsState","playerActions","albumsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,cAAc,MAAM,MAAM,cAAc,IAAI,KAAK,MAAM,MAAM,WAAW,EAAE,YAAW,IAAK;AAChG,UAAI,aAAa;AAGjB,UAAI,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,SAAS,GAAG;AAEzD,YAAI,MAAM,MAAM,QAAQ,CAAC,GAAG,MAAM;AAChC,uBAAa,MAAM,MAAM,QAAQ,IAAI,YAAU,OAAO,IAAI,EAAE,KAAK,IAAI;AAAA,QACvE,WAAW,OAAO,MAAM,MAAM,QAAQ,CAAC,MAAM,UAAU;AAErD,uBAAa;AAAA,QACf;AAAA,MACF,WAAW,MAAM,MAAM,QAAQ,MAAM;AAEnC,qBAAa,MAAM,MAAM,OAAO;AAAA,MAClC;AAEA,aAAO,cAAc,GAAG,UAAU,MAAM,WAAW,KAAK;AAAA,IAC1D,CAAC;AAGD,UAAM,YAAY,OAAO,UAAU;AAEjC,UAAIA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY,mBAAmB,SAAS,GAAG;AACvHC,gBAAc,SAASD,MAAY,kBAAkB;AACrD;AAAA,MACF;AAGA,YAAM,SAAS,MAAME,UAAc,iBAAiB,MAAM,GAAG;AAE7D,UAAI,UAAU,OAAO,SAAS,GAAG;AAC/BD,gBAAc,SAAS,MAAM;AAAA,MAC/B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlbumCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/AlbumCard.vue"],"sourcesContent":["<!-- components/cards/AlbumCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'album', params: { url: album.url } }\" \n    class=\"album-card d-block radius-medium o-hidden\"\n  >\n    <div class=\"album-cover pos-relative\">\n      <Media \n        :url=\"album.coverArt || album.coverUrl || '/logo/logo-placeholder.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div v-if=\"album.totalTracks && album.totalTracks > 0\" class=\"album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out\">\n        <Button \n          @click.stop.prevent=\"playAlbum(album)\" \n          class=\"play-button i-big bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--white))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"album-info pd-medium bg-light\">\n      <h3 class=\"mn-b-thin t-medium  t-truncate\" style=\"height: 1.50rem\">{{ album.title }}</h3>\n      <p class=\"t-transp t-small t-truncate\">{{ albumInfo }}</p>\n    </div>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\n\n// Import player store & albums store\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\n\nconst props = defineProps({\n  album: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst albumInfo = computed(() => {\n  const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : '';\n  let artistName = 'Unknown Artist';\n  \n  // Handle artists array (model uses 'artists' not 'artist')\n  if (props.album.artists && props.album.artists.length > 0) {\n    // If populated, artists[0] will have name property\n    if (props.album.artists[0]?.name) {\n      artistName = props.album.artists.map(artist => artist.name).join(', ');\n    } else if (typeof props.album.artists[0] === 'string') {\n      // If not populated, it might be just IDs\n      artistName = 'Various Artists';\n    }\n  } else if (props.album.artist?.name) {\n    // Fallback for old data structure\n    artistName = props.album.artist.name;\n  }\n  \n  return releaseYear ? `${artistName} • ${releaseYear}` : artistName;\n});\n\n// Methods\nconst playAlbum = async (album) => {\n  // If album tracks are already loaded in state, use those\n  if (albumsState.currentAlbum && albumsState.currentAlbum._id === album._id && albumsState.currentAlbumTracks.length > 0) {\n    playerActions.setQueue(albumsState.currentAlbumTracks);\n    return;\n  }\n  \n  // Otherwise fetch tracks for this album\n  const tracks = await albumsActions.fetchAlbumTracks(album._id);\n  \n  if (tracks && tracks.length > 0) {\n    playerActions.setQueue(tracks);\n  }\n};\n</script>\n\n<style scoped>\n.album-card {\n  transition: transform 0.3s ease;\n}\n\n.album-card:hover {\n  transform: translateY(-5px);\n}\n\n.album-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.album-card:hover .album-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.album-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["albumsState","playerActions","albumsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,cAAc,MAAM,MAAM,cAAc,IAAI,KAAK,MAAM,MAAM,WAAW,EAAE,YAAW,IAAK;AAChG,UAAI,aAAa;AAGjB,UAAI,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,SAAS,GAAG;AAEzD,YAAI,MAAM,MAAM,QAAQ,CAAC,GAAG,MAAM;AAChC,uBAAa,MAAM,MAAM,QAAQ,IAAI,YAAU,OAAO,IAAI,EAAE,KAAK,IAAI;AAAA,QACvE,WAAW,OAAO,MAAM,MAAM,QAAQ,CAAC,MAAM,UAAU;AAErD,uBAAa;AAAA,QACf;AAAA,MACF,WAAW,MAAM,MAAM,QAAQ,MAAM;AAEnC,qBAAa,MAAM,MAAM,OAAO;AAAA,MAClC;AAEA,aAAO,cAAc,GAAG,UAAU,MAAM,WAAW,KAAK;AAAA,IAC1D,CAAC;AAGD,UAAM,YAAY,OAAO,UAAU;AAEjC,UAAIA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY,mBAAmB,SAAS,GAAG;AACvHC,gBAAc,SAASD,MAAY,kBAAkB;AACrD;AAAA,MACF;AAGA,YAAM,SAAS,MAAME,UAAc,iBAAiB,MAAM,GAAG;AAE7D,UAAI,UAAU,OAAO,SAAS,GAAG;AAC/BD,gBAAc,SAAS,MAAM;AAAA,MAC/B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/cards/ArtistCardSmall.vue.js

@@ -1,10 +1,10 @@
-import { resolveComponent, createElementBlock, openBlock, createVNode, createBlock, createCommentVNode, withCtx, createElementVNode, toDisplayString, createTextVNode } from "vue";
+import { resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createCommentVNode, createElementBlock, toDisplayString, createTextVNode } from "vue";
 import _sfc_main$2 from "../../../../components/Button/Button.vue2.js";
 import Media from "../../../../components/Media/Media.vue.js";
 import _sfc_main$1 from "../../../icons/navigation/IconCheckmark.vue.js";
 /* empty css                     */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const _hoisted_1 = { class: "artist-card bg-light pd-medium radius-medium flex flex-center gap-big" };
+const _hoisted_1 = { class: "flex flex-nowrap flex-v-center gap-thin" };
 const _hoisted_2 = { class: "artist-avatar" };
 const _hoisted_3 = {
   key: 1,
@@ -45,12 +45,12 @@ const _sfc_main = {
     };
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_component_router_link, {
-          to: __props.artist.url ? { name: "artist", params: { url: __props.artist.url } } : __props.artist.to,
-          class: "flex flex-v-center gap-thin flex-1 hover-opacity"
-        }, {
-          default: withCtx(() => [
+      return openBlock(), createBlock(_component_router_link, {
+        to: __props.artist.url ? { name: "artist", params: { url: __props.artist.url } } : __props.artist.to,
+        class: "artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-1 hover-opacity"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
             createElementVNode("div", _hoisted_2, [
               __props.artist.photoUrl ? (openBlock(), createBlock(Media, {
                 key: 0,
@@ -70,25 +70,25 @@ const _sfc_main = {
               createElementVNode("span", _hoisted_6, toDisplayString(__props.artistType), 1)
             ])
           ]),
-          _: 1
-        }, 8, ["to"]),
-        __props.showFollowButton ? (openBlock(), createBlock(_sfc_main$2, {
-          key: 0,
-          onClick: handleFollowClick,
-          color: __props.isFollowing ? "primary" : "transp",
-          size: "small",
-          class: "bg-main"
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(__props.isFollowing ? "Following" : "Follow"), 1)
-          ]),
-          _: 1
-        }, 8, ["color"])) : createCommentVNode("", true)
-      ]);
+          __props.showFollowButton ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
+            onClick: handleFollowClick,
+            color: __props.isFollowing ? "primary" : "transp",
+            size: "small",
+            class: "bg-main"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.isFollowing ? "Following" : "Follow"), 1)
+            ]),
+            _: 1
+          }, 8, ["color"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["to"]);
     };
   }
 };
-const ArtistCardSmall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7fd022f7"]]);
+const ArtistCardSmall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-64fdf510"]]);
 export {
   ArtistCardSmall as default
 };

package/dist/martyrs/src/modules/music/components/cards/ArtistCardSmall.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArtistCardSmall.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCardSmall.vue"],"sourcesContent":["<!-- components/cards/ArtistCard.vue -->\n<template>\n  <div class=\"artist-card bg-light pd-medium radius-medium flex flex-center gap-big\">\n    <router-link \n      :to=\"artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to\"\n      class=\"flex flex-v-center gap-thin flex-1 hover-opacity\"\n    >\n      <div class=\"artist-avatar\">\n        <Media \n          v-if=\"artist.photoUrl\"\n          :url=\"artist.photoUrl\"\n          :alt=\"artist.name\"\n          class=\"w-4r h-4r radius-full object-fit-cover\"\n        />\n        <div v-else class=\"w-4r h-4r flex flex center radius-extra radius-full bg-main flex-center\">\n          {{ artist.name.charAt(0) }}\n        </div>\n      </div>\n\n      <div>\n        <div class=\"flex items-center gap-thin\">\n          <span class=\"mn-b-thin\">{{ artist.name }}</span>\n          <IconVerified v-if=\"artist.isVerified\" class=\"w-1r h-1r t-primary\" />\n        </div>\n        <span class=\"t-small t-transp\">{{ artistType }}</span>\n      </div>\n    </router-link>\n\n    <Button \n      v-if=\"showFollowButton\"\n      @click=\"handleFollowClick\"\n      :color=\"isFollowing ? 'primary' : 'transp'\"\n      size=\"small\"\n      class=\"bg-main\"\n    >\n      {{ isFollowing ? 'Following' : 'Follow' }}\n    </Button>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true,\n    validator: (value) => {\n      return value._id && value.name && value.url;\n    }\n  },\n  isFollowing: {\n    type: Boolean,\n    default: false\n  },\n  showFollowButton: {\n    type: Boolean,\n    default: true\n  },\n  artistType: {\n    type: String,\n    default: 'Artist'\n  }\n});\n\nconst emit = defineEmits(['toggle-follow']);\n\nconst handleFollowClick = () => {\n  emit('toggle-follow', props.artist._id);\n};\n</script>\n\n<style scoped>\n.artist-card {\n  transition: all 0.2s ease;\n}\n\n.artist-card:hover {\n  transform: translateY(-5px);\n}\n\n.artist-avatar img {\n  transition: transform 0.2s ease;\n}\n\n.artist-card:hover .artist-avatar img {\n  transform: scale(1.05);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,QAAQ;AAsBd,UAAM,OAAO;AAEb,UAAM,oBAAoB,MAAM;AAC9B,WAAK,iBAAiB,MAAM,OAAO,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ArtistCardSmall.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCardSmall.vue"],"sourcesContent":["<!-- components/cards/ArtistCard.vue -->\n<template>\n  <router-link\n   :to=\"artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to\"\n    class=\"artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-1 hover-opacity\"\n  >\n    <div\n     class=\"flex flex-nowrap flex-v-center gap-thin\"\n    >\n      <div class=\"artist-avatar\">\n        <Media \n          v-if=\"artist.photoUrl\"\n          :url=\"artist.photoUrl\"\n          :alt=\"artist.name\"\n          class=\"w-4r h-4r radius-full object-fit-cover\"\n        />\n        <div v-else class=\"w-4r h-4r flex flex center radius-extra radius-full bg-main flex-center\">\n          {{ artist.name.charAt(0) }}\n        </div>\n      </div>\n\n      <div>\n        <div class=\"flex items-center gap-thin\">\n          <span class=\"mn-b-thin\">{{ artist.name }}</span>\n          <IconVerified v-if=\"artist.isVerified\" class=\"w-1r h-1r t-primary\" />\n        </div>\n        <span class=\"t-small t-transp\">{{ artistType }}</span>\n      </div>\n    </div>\n\n    <Button \n      v-if=\"showFollowButton\"\n      @click=\"handleFollowClick\"\n      :color=\"isFollowing ? 'primary' : 'transp'\"\n      size=\"small\"\n      class=\"bg-main\"\n    >\n      {{ isFollowing ? 'Following' : 'Follow' }}\n    </Button>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true,\n    validator: (value) => {\n      return value._id && value.name && value.url;\n    }\n  },\n  isFollowing: {\n    type: Boolean,\n    default: false\n  },\n  showFollowButton: {\n    type: Boolean,\n    default: true\n  },\n  artistType: {\n    type: String,\n    default: 'Artist'\n  }\n});\n\nconst emit = defineEmits(['toggle-follow']);\n\nconst handleFollowClick = () => {\n  emit('toggle-follow', props.artist._id);\n};\n</script>\n\n<style scoped>\n.artist-card {\n  transition: all 0.2s ease;\n}\n\n.artist-card:hover {\n  transform: translateY(-5px);\n}\n\n.artist-avatar img {\n  transition: transform 0.2s ease;\n}\n\n.artist-card:hover .artist-avatar img {\n  transform: scale(1.05);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,UAAM,QAAQ;AAsBd,UAAM,OAAO;AAEb,UAAM,oBAAoB,MAAM;AAC9B,WAAK,iBAAiB,MAAM,OAAO,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/cards/TrackListCard.vue.js

@@ -124,7 +124,7 @@ const _sfc_main = {
             }, [
               __props.track.url ? (openBlock(), createBlock(_component_router_link, {
                 key: 0,
-                to: { name: "track", params: { url: __props.track.url } },
+                to: "/music/tracks/" + __props.track.url,
                 class: normalizeClass(["hover-t-main hover-t-underline", { "t-main": isPlaying(__props.track) }]),
                 onClick: _cache[4] || (_cache[4] = withModifiers(() => {
                 }, ["stop"]))
@@ -140,7 +140,7 @@ const _sfc_main = {
             }, [
               __props.track.artist && __props.track.artist._id ? (openBlock(), createBlock(_component_router_link, {
                 key: 0,
-                to: { name: "artist", params: { url: __props.track.artist.url } },
+                to: "/music/artists/" + __props.track.artist.url,
                 class: "t-transp hover-t-underline",
                 onClick: _cache[5] || (_cache[5] = withModifiers(() => {
                 }, ["stop"]))
@@ -156,7 +156,7 @@ const _sfc_main = {
         __props.showAlbum ? (openBlock(), createElementBlock("div", _hoisted_8, [
           __props.track.album && __props.track.album._id ? (openBlock(), createBlock(_component_router_link, {
             key: 0,
-            to: { name: "album", params: { url: __props.track.album.url } },
+            to: "/music/albums/" + __props.track.album.url,
             class: "t-transp hover-t-underline",
             onClick: _cache[6] || (_cache[6] = withModifiers(() => {
             }, ["stop"]))

package/dist/martyrs/src/modules/music/components/cards/TrackListCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackListCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/TrackListCard.vue"],"sourcesContent":["<!-- components/cards/TrackListCard.vue -->\n<template>\n  <div \n    class=\"track-item pd-small hover-bg-white-transp-25 flex-v-center flex cursor-pointer\"\n    :class=\"{'bg-main-transp-10': isPlaying(track)}\"\n    @click=\"playTrack(track)\"\n    @dblclick=\"playTrack(track, true)\"\n    @mouseenter=\"hoveredIndex = props.index\"\n    @mouseleave=\"hoveredIndex = -1\"\n  >\n    <div class=\"track-number w-3r t-center pos-relative\">\n      <span v-if=\"!isPlaying(track) && hoveredIndex !== props.index\" class=\"t-transp\">{{ props.index + 1 }}</span>\n      <Button \n        v-else-if=\"!isPlaying(track) && hoveredIndex === props.index\"\n        @click.stop=\"playTrack(track)\"\n        class=\"bg-main  pd-thin\"\n        :showLoader=\"false\"\n        :showSucces=\"false\"\n      >\n        <IconPlay @click.stop=\"playTrack(track)\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n      </Button>\n      <Button \n        v-else\n        @click.stop=\"pauseTrack()\"\n        class=\"bg-main pd-thin\"\n        :showLoader=\"false\"\n        :showSucces=\"false\"\n      >\n        <IconPause @click.stop=\"pauseTrack()\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n      </Button>\n    </div>\n    \n    <div class=\"track-title flex-child-1 flex flex-v-center\">\n      <div v-if=\"showCover\" class=\"track-cover mn-r-small\">\n        <Media \n          :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.jpg'\" \n          class=\"w-3r h-3r object-fit-cover o-hidden radius-small\"\n        />\n      </div>\n      \n      <div class=\"track-info\">\n        <div class=\"track-name \" :class=\"{'t-main': isPlaying(track)}\">\n          <router-link \n            v-if=\"track.url\"\n            :to=\"{ name: 'track', params: { url: track.url } }\"\n            class=\"hover-t-main hover-t-underline\"\n            :class=\"{'t-main': isPlaying(track)}\"\n            @click.stop\n          >\n            {{ track.title }}\n          </router-link>\n          <span v-else>{{ track.title }}</span>\n        </div>\n        <div :class=\"{'t-main': isPlaying(track)}\" class=\"track-artist t-transp t-small\">\n          <router-link \n            v-if=\"track.artist && track.artist._id\"\n            :to=\"{ name: 'artist', params: { url: track.artist.url } }\"\n            class=\"t-transp hover-t-underline\"\n            @click.stop\n          >\n            {{ getArtistName(track) }}\n          </router-link>\n          <span v-else>{{ getArtistName(track) }}</span>\n        </div>\n      </div>\n    </div>\n    \n    <div v-if=\"showAlbum\" class=\"track-album  w-15r mobile:w-0 mobile:hidden t-transp t-truncate\">\n      <router-link \n        v-if=\"track.album && track.album._id\"\n        :to=\"{ name: 'album', params: { url: track.album.url } }\"\n        class=\"t-transp hover-t-underline\"\n        @click.stop\n      >\n        {{ track.album.title }}\n      </router-link>\n      <span v-else>{{ track.album?.title || 'Single' }}</span>\n    </div>\n    \n    <div class=\"track-duration w-5r t-right t-transp\">{{ formatDuration(track.duration) }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Props\nconst props = defineProps({\n  track: {\n    type: Object,\n    required: true\n  },\n  index: {\n    type: Number,\n    default: 0\n  },\n  showCover: {\n    type: Boolean,\n    default: true\n  },\n  showAlbum: {\n    type: Boolean,\n    default: true\n  }\n});\n\n// State\nconst hoveredIndex = ref(-1);\n\n// Methods\nconst isPlaying = (track) => {\n  return playerState.currentTrack && playerState.currentTrack._id === track._id && playerState.isPlaying;\n};\n\nconst playTrack = (track, force = false) => {\n  if (isPlaying(track) && !force) {\n    playerActions.togglePlay();\n  } else {\n    playerActions.playTrack(track);\n  }\n};\n\nconst pauseTrack = () => {\n  playerActions.togglePlay();\n};\n\nconst getArtistName = (track) => {\n  if (!track || !track.artist) return 'Unknown Artist';\n  return typeof track.artist === 'object' ? track.artist.name : 'Unknown Artist';\n};\n\nconst formatDuration = (duration) => {\n  if (!duration) return '--:--';\n  \n  const minutes = Math.floor(duration / 60);\n  const seconds = Math.floor(duration % 60);\n  return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n};\n</script>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,UAAM,QAAQ;AAoBd,UAAM,eAAe,IAAI,EAAE;AAG3B,UAAM,YAAY,CAAC,UAAU;AAC3B,aAAOA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY;AAAA,IAC/F;AAEA,UAAM,YAAY,CAAC,OAAO,QAAQ,UAAU;AAC1C,UAAI,UAAU,KAAK,KAAK,CAAC,OAAO;AAC9BC,gBAAc,WAAU;AAAA,MAC1B,OAAO;AACLA,gBAAc,UAAU,KAAK;AAAA,MAC/B;AAAA,IACF;AAEA,UAAM,aAAa,MAAM;AACvBA,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,SAAS,CAAC,MAAM,OAAQ,QAAO;AACpC,aAAO,OAAO,MAAM,WAAW,WAAW,MAAM,OAAO,OAAO;AAAA,IAChE;AAEA,UAAM,iBAAiB,CAAC,aAAa;AACnC,UAAI,CAAC,SAAU,QAAO;AAEtB,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,aAAO,GAAG,OAAO,IAAI,QAAQ,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TrackListCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/TrackListCard.vue"],"sourcesContent":["<!-- components/cards/TrackListCard.vue -->\n<template>\n  <div \n    class=\"track-item pd-small hover-bg-white-transp-25 flex-v-center flex cursor-pointer\"\n    :class=\"{'bg-main-transp-10': isPlaying(track)}\"\n    @click=\"playTrack(track)\"\n    @dblclick=\"playTrack(track, true)\"\n    @mouseenter=\"hoveredIndex = props.index\"\n    @mouseleave=\"hoveredIndex = -1\"\n  >\n    <div class=\"track-number w-3r t-center pos-relative\">\n      <span v-if=\"!isPlaying(track) && hoveredIndex !== props.index\" class=\"t-transp\">{{ props.index + 1 }}</span>\n      <Button \n        v-else-if=\"!isPlaying(track) && hoveredIndex === props.index\"\n        @click.stop=\"playTrack(track)\"\n        class=\"bg-main  pd-thin\"\n        :showLoader=\"false\"\n        :showSucces=\"false\"\n      >\n        <IconPlay @click.stop=\"playTrack(track)\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n      </Button>\n      <Button \n        v-else\n        @click.stop=\"pauseTrack()\"\n        class=\"bg-main pd-thin\"\n        :showLoader=\"false\"\n        :showSucces=\"false\"\n      >\n        <IconPause @click.stop=\"pauseTrack()\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n      </Button>\n    </div>\n    \n    <div class=\"track-title flex-child-1 flex flex-v-center\">\n      <div v-if=\"showCover\" class=\"track-cover mn-r-small\">\n        <Media \n          :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.jpg'\" \n          class=\"w-3r h-3r object-fit-cover o-hidden radius-small\"\n        />\n      </div>\n      \n      <div class=\"track-info\">\n        <div class=\"track-name \" :class=\"{'t-main': isPlaying(track)}\">\n          <router-link\n            v-if=\"track.url\"\n            :to=\"'/music/tracks/' + track.url\"\n            class=\"hover-t-main hover-t-underline\"\n            :class=\"{'t-main': isPlaying(track)}\"\n            @click.stop\n          >\n            {{ track.title }}\n          </router-link>\n          <span v-else>{{ track.title }}</span>\n        </div>\n        <div :class=\"{'t-main': isPlaying(track)}\" class=\"track-artist t-transp t-small\">\n          <router-link\n            v-if=\"track.artist && track.artist._id\"\n            :to=\"'/music/artists/' + track.artist.url\"\n            class=\"t-transp hover-t-underline\"\n            @click.stop\n          >\n            {{ getArtistName(track) }}\n          </router-link>\n          <span v-else>{{ getArtistName(track) }}</span>\n        </div>\n      </div>\n    </div>\n    \n    <div v-if=\"showAlbum\" class=\"track-album  w-15r mobile:w-0 mobile:hidden t-transp t-truncate\">\n      <router-link\n        v-if=\"track.album && track.album._id\"\n        :to=\"'/music/albums/' + track.album.url\"\n        class=\"t-transp hover-t-underline\"\n        @click.stop\n      >\n        {{ track.album.title }}\n      </router-link>\n      <span v-else>{{ track.album?.title || 'Single' }}</span>\n    </div>\n    \n    <div class=\"track-duration w-5r t-right t-transp\">{{ formatDuration(track.duration) }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Props\nconst props = defineProps({\n  track: {\n    type: Object,\n    required: true\n  },\n  index: {\n    type: Number,\n    default: 0\n  },\n  showCover: {\n    type: Boolean,\n    default: true\n  },\n  showAlbum: {\n    type: Boolean,\n    default: true\n  }\n});\n\n// State\nconst hoveredIndex = ref(-1);\n\n// Methods\nconst isPlaying = (track) => {\n  return playerState.currentTrack && playerState.currentTrack._id === track._id && playerState.isPlaying;\n};\n\nconst playTrack = (track, force = false) => {\n  if (isPlaying(track) && !force) {\n    playerActions.togglePlay();\n  } else {\n    playerActions.playTrack(track);\n  }\n};\n\nconst pauseTrack = () => {\n  playerActions.togglePlay();\n};\n\nconst getArtistName = (track) => {\n  if (!track || !track.artist) return 'Unknown Artist';\n  return typeof track.artist === 'object' ? track.artist.name : 'Unknown Artist';\n};\n\nconst formatDuration = (duration) => {\n  if (!duration) return '--:--';\n  \n  const minutes = Math.floor(duration / 60);\n  const seconds = Math.floor(duration % 60);\n  return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n};\n</script>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,UAAM,QAAQ;AAoBd,UAAM,eAAe,IAAI,EAAE;AAG3B,UAAM,YAAY,CAAC,UAAU;AAC3B,aAAOA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY;AAAA,IAC/F;AAEA,UAAM,YAAY,CAAC,OAAO,QAAQ,UAAU;AAC1C,UAAI,UAAU,KAAK,KAAK,CAAC,OAAO;AAC9BC,gBAAc,WAAU;AAAA,MAC1B,OAAO;AACLA,gBAAc,UAAU,KAAK;AAAA,MAC/B;AAAA,IACF;AAEA,UAAM,aAAa,MAAM;AACvBA,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,SAAS,CAAC,MAAM,OAAQ,QAAO;AACpC,aAAO,OAAO,MAAM,WAAW,WAAW,MAAM,OAAO,OAAO;AAAA,IAChE;AAEA,UAAM,iBAAiB,CAAC,aAAa;AACnC,UAAI,CAAC,SAAU,QAAO;AAEtB,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,aAAO,GAAG,OAAO,IAAI,QAAQ,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,17 +1,42 @@
-import { computed, createBlock, createCommentVNode, openBlock } from "vue";
+import { computed, watch, createElementBlock, openBlock, createBlock, createCommentVNode, unref, withCtx, createVNode } from "vue";
+import { useRoute } from "vue-router";
 import MusicPlayer from "../player/MusicPlayer.vue.js";
-import { state } from "../../store/player.js";
+import FullscreenPlayer from "../player/FullscreenPlayer.vue.js";
+import _sfc_main$1 from "../../../../components/BottomSheet/BottomSheet.vue.js";
+import { state, actions } from "../../store/player.js";
+/* empty css                       */
 const _sfc_main = {
   __name: "MusicBottomPlayer",
   setup(__props) {
+    const route = useRoute();
     const currentTrack = computed(() => {
       return state.currentTrack;
     });
+    const showFullPlayer = computed(() => {
+      return state.showFullPlayer;
+    });
+    watch(() => route.path, () => {
+      if (state.showFullPlayer) {
+        actions.toggleFullPlayer();
+      }
+    });
     return (_ctx, _cache) => {
-      return currentTrack.value ? (openBlock(), createBlock(MusicPlayer, {
-        key: 0,
-        class: "pos-absolute pos-b-0 w-100"
-      })) : createCommentVNode("", true);
+      return openBlock(), createElementBlock("div", null, [
+        currentTrack.value && !showFullPlayer.value ? (openBlock(), createBlock(MusicPlayer, {
+          key: 0,
+          class: "pos-absolute pos-b-0 w-100"
+        })) : createCommentVNode("", true),
+        showFullPlayer.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 1,
+          show: showFullPlayer.value,
+          onToggle: _cache[0] || (_cache[0] = ($event) => unref(actions).toggleFullPlayer())
+        }, {
+          default: withCtx(() => [
+            createVNode(FullscreenPlayer)
+          ]),
+          _: 1
+        }, 8, ["show"])) : createCommentVNode("", true)
+      ]);
     };
   }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MusicBottomPlayer.vue.js","sources":["../../../../../../../src/modules/music/components/layouts/MusicBottomPlayer.vue"],"sourcesContent":["<!-- components/layouts/MusicBottomPlayer.vue -->\n<template>\n  <MusicPlayer v-if=\"currentTrack\" class=\"pos-absolute pos-b-0 w-100\" />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport MusicPlayer from '../player/MusicPlayer.vue';\n\n// Import store modules\nimport { state as playerState } from '../../store/player.js';\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n</script>"],"names":["playerState"],"mappings":";;;;;;AAaA,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOA,MAAY;AAAA,IACrB,CAAC;;;;;;;;;"}
+{"version":3,"file":"MusicBottomPlayer.vue.js","sources":["../../../../../../../src/modules/music/components/layouts/MusicBottomPlayer.vue"],"sourcesContent":["<!-- components/layouts/MusicBottomPlayer.vue -->\n<template>\n  <div>\n    <MusicPlayer v-if=\"currentTrack && !showFullPlayer\" class=\"pos-absolute pos-b-0 w-100\" />\n\n    <BottomSheet\n      v-if=\"showFullPlayer\"\n      :show=\"showFullPlayer\"\n      @toggle=\"playerActions.toggleFullPlayer()\"\n    >\n      <FullscreenPlayer />\n    </BottomSheet>\n  </div>\n</template>\n\n<script setup>\nimport { computed, watch } from 'vue';\nimport { useRoute } from 'vue-router';\nimport MusicPlayer from '../player/MusicPlayer.vue';\nimport FullscreenPlayer from '../player/FullscreenPlayer.vue';\nimport BottomSheet from '@martyrs/src/components/BottomSheet/BottomSheet.vue';\n\n// Import store modules\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\nconst route = useRoute();\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n\n// Fullscreen player state\nconst showFullPlayer = computed(() => {\n  return playerState.showFullPlayer;\n});\n\n// Close fullscreen player on route change\nwatch(() => route.path, () => {\n  if (playerState.showFullPlayer) {\n    playerActions.toggleFullPlayer();\n  }\n});\n</script>\n\n<style>\n/* Shared control button styles for both players */\n.control-btn {\n  background: none;\n  border: none;\n  color: rgb(var(--grey));\n  cursor: pointer;\n  padding: 8px;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.control-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.control-btn.primary {\n  background: rgb(var(--second));\n  color: rgb(var(--white));\n  width: 32px;\n  height: 32px;\n}\n\n.play-icon {\n  width: 14px;\n  height: 14px;\n  fill: rgb(var(--white));\n}\n\n.control-btn.primary:hover {\n  background: rgb(var(--second));\n  transform: scale(1.06);\n}\n\n.control-btn.secondary:hover {\n  color: rgb(var(--white));\n  background: rgba(var(--black),0.1);\n}\n\n.control-btn.secondary:hover .control-icon {\n  fill: rgb(var(--white));\n}\n\n.control-btn.active {\n  color: rgb(var(--main));\n  background: rgba(var(--second),0.1);\n}\n\n.control-btn.active .control-icon {\n  fill: rgb(var(--main));\n}\n\n.control-btn.active:hover {\n  color: rgb(var(--main));\n  opacity: 0.8;\n  background: rgba(var(--second),0.2);\n}\n</style>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;AAyBA,UAAM,QAAQ,SAAQ;AAGtB,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOA,MAAY;AAAA,IACrB,CAAC;AAGD,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAOA,MAAY;AAAA,IACrB,CAAC;AAGD,UAAM,MAAM,MAAM,MAAM,MAAM;AAC5B,UAAIA,MAAY,gBAAgB;AAC9BC,gBAAc,iBAAgB;AAAA,MAChC;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;"}