@ozdao/martyrs 0.2.492 → 0.2.494

package/dist/martyrs/src/modules/inventory/components/pages/Inventory.vue.cjs

@@ -13,7 +13,7 @@ const IconEllipsis = require("../../../icons/navigation/IconEllipsis.vue.cjs");
 const AdjustmentForm = require("../forms/AdjustmentForm.vue.cjs");
 const StockAlertsForm = require("../forms/StockAlertsForm.vue.cjs");
 const HistoryView = require("../forms/HistoryView.vue.cjs");
-const ColumnSettingsMenu = require("../forms/ColumnSettingsMenu.vue.cjs");
+const ColumnSettingsMenu = ;/* empty css                                */
 const _inventory_store = require("../../store/ inventory.store.cjs");
 const products = require("../../../products/store/products.cjs");
 const auth = require("../../../auth/views/store/auth.cjs");

package/dist/martyrs/src/modules/inventory/components/pages/InventoryEdit.vue.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const Block = require("../../../../components/Block/Block.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
-const Field = require("../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 ;/* empty css                                         */
 ;/* empty css                                              */

package/dist/martyrs/src/modules/inventory/components/pages/InventoryEdit.vue.js

@@ -1,7 +1,7 @@
 import { ref, computed, onMounted, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, unref, Fragment, renderList, createBlock, createCommentVNode, toDisplayString } from "vue";
 import _sfc_main$4 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$7 from "../../../../components/Button/Button.vue.js";
-import Field from "../../../../components/Field/Field.vue2.js";
+import Field from "../../../../components/Field/Field.vue.js";
 import _sfc_main$2 from "../../../../components/Feed/Feed.vue.js";
 /* empty css                                       */
 /* empty css                                            */

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

@@ -9,10 +9,13 @@ const albums = require("../../store/albums.cjs");
 ;/* empty css                 */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
 const _hoisted_1 = { class: "album-cover pos-relative" };
-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-small bg-dark-transp-20" };
-const _hoisted_4 = { class: "t-medium t-truncate" };
-const _hoisted_5 = { class: "t-grey t-small t-truncate" };
+const _hoisted_2 = {
+  key: 0,
+  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_5 = { class: "t-transp t-small t-truncate" };
 const _sfc_main = {
   __name: "AlbumCard",
   props: {
@@ -26,10 +29,14 @@ const _sfc_main = {
     const albumInfo = vue.computed(() => {
       const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : "";
       let artistName = "Unknown Artist";
-      if (props.album.artist?.name) {
+      if (props.album.artists && props.album.artists.length > 0) {
+        if (props.album.artists[0]?.name) {
+          artistName = props.album.artists.map((artist) => artist.name).join(", ");
+        } else if (typeof props.album.artists[0] === "string") {
+          artistName = "Various Artists";
+        }
+      } else if (props.album.artist?.name) {
         artistName = props.album.artist.name;
-      } else if (typeof props.album.artist === "string") {
-        artistName = props.album.artist;
       }
       return releaseYear ? `${artistName} • ${releaseYear}` : artistName;
     });
@@ -47,30 +54,30 @@ const _sfc_main = {
       const _component_router_link = vue.resolveComponent("router-link");
       return vue.openBlock(), vue.createBlock(_component_router_link, {
         to: { name: "album", params: { url: __props.album.url } },
-        class: "album-card d-block radius-small o-hidden"
+        class: "album-card d-block radius-medium o-hidden"
       }, {
         default: vue.withCtx(() => [
           vue.createElementVNode("div", _hoisted_1, [
             vue.createVNode(Media.default, {
-              url: __props.album.coverUrl || "/assets/placeholder-album.jpg",
+              url: __props.album.coverArt || __props.album.coverUrl || "/logo/logo-placeholder.jpg",
               class: "w-100 aspect-1x1 object-fit-cover"
             }, null, 8, ["url"]),
-            vue.createElementVNode("div", _hoisted_2, [
+            __props.album.totalTracks && __props.album.totalTracks > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
               vue.createVNode(Button.default, {
-                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => playAlbum(__props.album), ["stop"])),
-                class: "play-button bg-main radius-round flex-center flex aspect-1x1",
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => playAlbum(__props.album), ["stop", "prevent"])),
+                class: "play-button i-big bg-main radius-round flex-center flex aspect-1x1",
                 showLoader: false,
                 showSucces: false
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(IconPlay.default, {
                     class: "i-small",
-                    fill: "rgb(var(--black))"
+                    fill: "rgb(var(--white))"
                   })
                 ]),
                 _: 1
               })
-            ])
+            ])) : vue.createCommentVNode("", true)
           ]),
           vue.createElementVNode("div", _hoisted_3, [
             vue.createElementVNode("h3", _hoisted_4, vue.toDisplayString(__props.album.title), 1),
@@ -82,6 +89,6 @@ const _sfc_main = {
     };
   }
 };
-const AlbumCard = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-6163e3e6"]]);
+const AlbumCard = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-faf7f060"]]);
 exports.default = AlbumCard;
 //# sourceMappingURL=AlbumCard.vue.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AlbumCard.vue.cjs","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-small o-hidden\"\n  >\n    <div class=\"album-cover pos-relative\">\n      <Media \n        :url=\"album.coverUrl || '/assets/placeholder-album.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div 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=\"playAlbum(album)\" \n          class=\"play-button bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"album-info pd-small bg-dark-transp-20\">\n      <h3 class=\" t-medium t-truncate\">{{ album.title }}</h3>\n      <p class=\"t-grey 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  if (props.album.artist?.name) {\n    artistName = props.album.artist.name;\n  } else if (typeof props.album.artist === 'string') {\n    artistName = props.album.artist;\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  width: 48px;\n  height: 48px;\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":["computed","albumsState","playerActions","albumsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,YAAYA,IAAAA,SAAS,MAAM;AAC/B,YAAM,cAAc,MAAM,MAAM,cAAc,IAAI,KAAK,MAAM,MAAM,WAAW,EAAE,YAAW,IAAK;AAChG,UAAI,aAAa;AAEjB,UAAI,MAAM,MAAM,QAAQ,MAAM;AAC5B,qBAAa,MAAM,MAAM,OAAO;AAAA,MAClC,WAAW,OAAO,MAAM,MAAM,WAAW,UAAU;AACjD,qBAAa,MAAM,MAAM;AAAA,MAC3B;AAEA,aAAO,cAAc,GAAG,UAAU,MAAM,WAAW,KAAK;AAAA,IAC1D,CAAC;AAGD,UAAM,YAAY,OAAO,UAAU;AAEjC,UAAIC,aAAY,gBAAgBA,OAAAA,MAAY,aAAa,QAAQ,MAAM,OAAOA,OAAAA,MAAY,mBAAmB,SAAS,GAAG;AACvHC,uBAAc,SAASD,OAAAA,MAAY,kBAAkB;AACrD;AAAA,MACF;AAGA,YAAM,SAAS,MAAME,OAAAA,QAAc,iBAAiB,MAAM,GAAG;AAE7D,UAAI,UAAU,OAAO,SAAS,GAAG;AAC/BD,eAAAA,QAAc,SAAS,MAAM;AAAA,MAC/B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlbumCard.vue.cjs","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":["computed","albumsState","playerActions","albumsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,YAAYA,IAAAA,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,UAAIC,aAAY,gBAAgBA,OAAAA,MAAY,aAAa,QAAQ,MAAM,OAAOA,OAAAA,MAAY,mBAAmB,SAAS,GAAG;AACvHC,uBAAc,SAASD,OAAAA,MAAY,kBAAkB;AACrD;AAAA,MACF;AAGA,YAAM,SAAS,MAAME,OAAAA,QAAc,iBAAiB,MAAM,GAAG;AAE7D,UAAI,UAAU,OAAO,SAAS,GAAG;AAC/BD,eAAAA,QAAc,SAAS,MAAM;AAAA,MAC/B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { computed, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createVNode, withModifiers, toDisplayString } from "vue";
+import { computed, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createVNode, createElementBlock, createCommentVNode, withModifiers, toDisplayString } from "vue";
 import Media from "../../../../components/Media/Media.vue.js";
 import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconPlay.vue.js";
@@ -7,10 +7,13 @@ import { state, actions as actions$1 } from "../../store/albums.js";
 /* empty css               */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "album-cover pos-relative" };
-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-small bg-dark-transp-20" };
-const _hoisted_4 = { class: "t-medium t-truncate" };
-const _hoisted_5 = { class: "t-grey t-small t-truncate" };
+const _hoisted_2 = {
+  key: 0,
+  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_5 = { class: "t-transp t-small t-truncate" };
 const _sfc_main = {
   __name: "AlbumCard",
   props: {
@@ -24,10 +27,14 @@ const _sfc_main = {
     const albumInfo = computed(() => {
       const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : "";
       let artistName = "Unknown Artist";
-      if (props.album.artist?.name) {
+      if (props.album.artists && props.album.artists.length > 0) {
+        if (props.album.artists[0]?.name) {
+          artistName = props.album.artists.map((artist) => artist.name).join(", ");
+        } else if (typeof props.album.artists[0] === "string") {
+          artistName = "Various Artists";
+        }
+      } else if (props.album.artist?.name) {
         artistName = props.album.artist.name;
-      } else if (typeof props.album.artist === "string") {
-        artistName = props.album.artist;
       }
       return releaseYear ? `${artistName} • ${releaseYear}` : artistName;
     });
@@ -45,30 +52,30 @@ const _sfc_main = {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createBlock(_component_router_link, {
         to: { name: "album", params: { url: __props.album.url } },
-        class: "album-card d-block radius-small o-hidden"
+        class: "album-card d-block radius-medium o-hidden"
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
             createVNode(Media, {
-              url: __props.album.coverUrl || "/assets/placeholder-album.jpg",
+              url: __props.album.coverArt || __props.album.coverUrl || "/logo/logo-placeholder.jpg",
               class: "w-100 aspect-1x1 object-fit-cover"
             }, null, 8, ["url"]),
-            createElementVNode("div", _hoisted_2, [
+            __props.album.totalTracks && __props.album.totalTracks > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
               createVNode(_sfc_main$1, {
-                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => playAlbum(__props.album), ["stop"])),
-                class: "play-button bg-main radius-round flex-center flex aspect-1x1",
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => playAlbum(__props.album), ["stop", "prevent"])),
+                class: "play-button i-big bg-main radius-round flex-center flex aspect-1x1",
                 showLoader: false,
                 showSucces: false
               }, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$2, {
                     class: "i-small",
-                    fill: "rgb(var(--black))"
+                    fill: "rgb(var(--white))"
                   })
                 ]),
                 _: 1
               })
-            ])
+            ])) : createCommentVNode("", true)
           ]),
           createElementVNode("div", _hoisted_3, [
             createElementVNode("h3", _hoisted_4, toDisplayString(__props.album.title), 1),
@@ -80,7 +87,7 @@ const _sfc_main = {
     };
   }
 };
-const AlbumCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6163e3e6"]]);
+const AlbumCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-faf7f060"]]);
 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-small o-hidden\"\n  >\n    <div class=\"album-cover pos-relative\">\n      <Media \n        :url=\"album.coverUrl || '/assets/placeholder-album.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div 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=\"playAlbum(album)\" \n          class=\"play-button bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"album-info pd-small bg-dark-transp-20\">\n      <h3 class=\" t-medium t-truncate\">{{ album.title }}</h3>\n      <p class=\"t-grey 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  if (props.album.artist?.name) {\n    artistName = props.album.artist.name;\n  } else if (typeof props.album.artist === 'string') {\n    artistName = props.album.artist;\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  width: 48px;\n  height: 48px;\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;AAEjB,UAAI,MAAM,MAAM,QAAQ,MAAM;AAC5B,qBAAa,MAAM,MAAM,OAAO;AAAA,MAClC,WAAW,OAAO,MAAM,MAAM,WAAW,UAAU;AACjD,qBAAa,MAAM,MAAM;AAAA,MAC3B;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\">{{ 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/ArtistCard.vue.cjs

@@ -13,7 +13,7 @@ const _hoisted_3 = {
 const _hoisted_4 = { class: "h3" };
 const _hoisted_5 = { class: "p-small" };
 const _hoisted_6 = { class: "pd-small" };
-const _hoisted_7 = { class: "mn-b-micro t-trim-2" };
+const _hoisted_7 = { class: "t-medium mn-b-small t-truncate" };
 const _hoisted_8 = {
   key: 0,
   class: "p-small t-transp t-trim"
@@ -79,6 +79,6 @@ const _sfc_main = {
     };
   }
 };
-const ArtistCard = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-c2372a41"]]);
+const ArtistCard = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-648ab17c"]]);
 exports.default = ArtistCard;
 //# sourceMappingURL=ArtistCard.vue.cjs.map

package/dist/martyrs/src/modules/music/components/cards/ArtistCard.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ArtistCard.vue.cjs","sources":["../../../../../../../src/modules/music/components/cards/ArtistCard.vue"],"sourcesContent":["<template>\n  <div \n    class=\"artist-card flex flex-column radius-medium o-hidden bg-white\"\n    :class=\"{ 'cursor-pointer hover-scale-1': clickable }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"artist-image w-100 pos-relative aspect-1x1\">\n      <img \n        v-if=\"artist.photo\" \n        :src=\"FILE_SERVER_URL + artist.photo\" \n        :alt=\"artist.name\"\n        class=\"w-100 h-100 object-fit-cover\"\n        loading=\"lazy\"\n      />\n      <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n        <span class=\"h3\">{{ artist.name ? artist.name.charAt(0) : '?' }}</span>\n      </div>\n      \n      <div \n        v-if=\"showStatus\" \n        class=\"pos-absolute pos-t-small pos-r-small pd-micro radius-medium\"\n        :class=\"{\n          'bg-second': artist.status === 'published',\n          'bg-fifth': artist.status === 'featured',\n          'bg-grey': artist.status === 'draft'\n        }\"\n      >\n        <span class=\" p-small\">{{ artist.status }}</span>\n      </div>\n    </div>\n    \n    <div class=\"pd-small\">\n      <h4 class=\"mn-b-micro t-trim-2\">{{ artist.name }}</h4>\n      <p v-if=\"artist.genres && artist.genres.length\" class=\"p-small t-transp t-trim\">\n        {{ artist.genres.join(', ') }}\n      </p>\n    </div>\n    \n    <slot name=\"actions\"></slot>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { useRouter } from 'vue-router';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true\n  },\n  clickable: {\n    type: Boolean,\n    default: true\n  },\n  showStatus: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst router = useRouter();\n\nconst handleClick = () => {\n  if (!props.clickable) return;\n  \n  router.push({\n    name: 'artist',\n    params: { url: props.artist.url }\n  });\n};\n</script>\n\n<style scoped>\n.artist-card {\n  border: 1px solid rgba(var(--grey), 0.2);\n  transition: transform 0.2s ease;\n}\n\n.hover-scale-1:hover {\n  transform: scale(1.02);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n</style>"],"names":["useRouter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,QAAQ;AAed,UAAM,SAASA,UAAAA,UAAS;AAExB,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,MAAM,UAAW;AAEtB,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,QAAQ,EAAE,KAAK,MAAM,OAAO,IAAG;AAAA,MACnC,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ArtistCard.vue.cjs","sources":["../../../../../../../src/modules/music/components/cards/ArtistCard.vue"],"sourcesContent":["<template>\n  <div \n    class=\"artist-card flex flex-column radius-medium o-hidden bg-white\"\n    :class=\"{ 'cursor-pointer hover-scale-1': clickable }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"artist-image w-100 pos-relative aspect-1x1\">\n      <img \n        v-if=\"artist.photo\" \n        :src=\"FILE_SERVER_URL + artist.photo\" \n        :alt=\"artist.name\"\n        class=\"w-100 h-100 object-fit-cover\"\n        loading=\"lazy\"\n      />\n      <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n        <span class=\"h3\">{{ artist.name ? artist.name.charAt(0) : '?' }}</span>\n      </div>\n      \n      <div \n        v-if=\"showStatus\" \n        class=\"pos-absolute pos-t-small pos-r-small pd-micro radius-medium\"\n        :class=\"{\n          'bg-second': artist.status === 'published',\n          'bg-fifth': artist.status === 'featured',\n          'bg-grey': artist.status === 'draft'\n        }\"\n      >\n        <span class=\" p-small\">{{ artist.status }}</span>\n      </div>\n    </div>\n    \n    <div class=\"pd-small\">\n      <h4 class=\"t-medium mn-b-small t-truncate\">{{ artist.name }}</h4>\n      <p v-if=\"artist.genres && artist.genres.length\" class=\"p-small t-transp t-trim\">\n        {{ artist.genres.join(', ') }}\n      </p>\n    </div>\n    \n    <slot name=\"actions\"></slot>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { useRouter } from 'vue-router';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true\n  },\n  clickable: {\n    type: Boolean,\n    default: true\n  },\n  showStatus: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst router = useRouter();\n\nconst handleClick = () => {\n  if (!props.clickable) return;\n  \n  router.push({\n    name: 'artist',\n    params: { url: props.artist.url }\n  });\n};\n</script>\n\n<style scoped>\n.artist-card {\n  border: 1px solid rgba(var(--grey), 0.2);\n  transition: transform 0.2s ease;\n}\n\n.hover-scale-1:hover {\n  transform: scale(1.02);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n</style>"],"names":["useRouter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,QAAQ;AAed,UAAM,SAASA,UAAAA,UAAS;AAExB,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,MAAM,UAAW;AAEtB,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,QAAQ,EAAE,KAAK,MAAM,OAAO,IAAG;AAAA,MACnC,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -11,7 +11,7 @@ const _hoisted_3 = {
 const _hoisted_4 = { class: "h3" };
 const _hoisted_5 = { class: "p-small" };
 const _hoisted_6 = { class: "pd-small" };
-const _hoisted_7 = { class: "mn-b-micro t-trim-2" };
+const _hoisted_7 = { class: "t-medium mn-b-small t-truncate" };
 const _hoisted_8 = {
   key: 0,
   class: "p-small t-transp t-trim"
@@ -77,7 +77,7 @@ const _sfc_main = {
     };
   }
 };
-const ArtistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c2372a41"]]);
+const ArtistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-648ab17c"]]);
 export {
   ArtistCard as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ArtistCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCard.vue"],"sourcesContent":["<template>\n  <div \n    class=\"artist-card flex flex-column radius-medium o-hidden bg-white\"\n    :class=\"{ 'cursor-pointer hover-scale-1': clickable }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"artist-image w-100 pos-relative aspect-1x1\">\n      <img \n        v-if=\"artist.photo\" \n        :src=\"FILE_SERVER_URL + artist.photo\" \n        :alt=\"artist.name\"\n        class=\"w-100 h-100 object-fit-cover\"\n        loading=\"lazy\"\n      />\n      <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n        <span class=\"h3\">{{ artist.name ? artist.name.charAt(0) : '?' }}</span>\n      </div>\n      \n      <div \n        v-if=\"showStatus\" \n        class=\"pos-absolute pos-t-small pos-r-small pd-micro radius-medium\"\n        :class=\"{\n          'bg-second': artist.status === 'published',\n          'bg-fifth': artist.status === 'featured',\n          'bg-grey': artist.status === 'draft'\n        }\"\n      >\n        <span class=\" p-small\">{{ artist.status }}</span>\n      </div>\n    </div>\n    \n    <div class=\"pd-small\">\n      <h4 class=\"mn-b-micro t-trim-2\">{{ artist.name }}</h4>\n      <p v-if=\"artist.genres && artist.genres.length\" class=\"p-small t-transp t-trim\">\n        {{ artist.genres.join(', ') }}\n      </p>\n    </div>\n    \n    <slot name=\"actions\"></slot>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { useRouter } from 'vue-router';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true\n  },\n  clickable: {\n    type: Boolean,\n    default: true\n  },\n  showStatus: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst router = useRouter();\n\nconst handleClick = () => {\n  if (!props.clickable) return;\n  \n  router.push({\n    name: 'artist',\n    params: { url: props.artist.url }\n  });\n};\n</script>\n\n<style scoped>\n.artist-card {\n  border: 1px solid rgba(var(--grey), 0.2);\n  transition: transform 0.2s ease;\n}\n\n.hover-scale-1:hover {\n  transform: scale(1.02);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,QAAQ;AAed,UAAM,SAAS,UAAS;AAExB,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,MAAM,UAAW;AAEtB,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,QAAQ,EAAE,KAAK,MAAM,OAAO,IAAG;AAAA,MACnC,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ArtistCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCard.vue"],"sourcesContent":["<template>\n  <div \n    class=\"artist-card flex flex-column radius-medium o-hidden bg-white\"\n    :class=\"{ 'cursor-pointer hover-scale-1': clickable }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"artist-image w-100 pos-relative aspect-1x1\">\n      <img \n        v-if=\"artist.photo\" \n        :src=\"FILE_SERVER_URL + artist.photo\" \n        :alt=\"artist.name\"\n        class=\"w-100 h-100 object-fit-cover\"\n        loading=\"lazy\"\n      />\n      <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n        <span class=\"h3\">{{ artist.name ? artist.name.charAt(0) : '?' }}</span>\n      </div>\n      \n      <div \n        v-if=\"showStatus\" \n        class=\"pos-absolute pos-t-small pos-r-small pd-micro radius-medium\"\n        :class=\"{\n          'bg-second': artist.status === 'published',\n          'bg-fifth': artist.status === 'featured',\n          'bg-grey': artist.status === 'draft'\n        }\"\n      >\n        <span class=\" p-small\">{{ artist.status }}</span>\n      </div>\n    </div>\n    \n    <div class=\"pd-small\">\n      <h4 class=\"t-medium mn-b-small t-truncate\">{{ artist.name }}</h4>\n      <p v-if=\"artist.genres && artist.genres.length\" class=\"p-small t-transp t-trim\">\n        {{ artist.genres.join(', ') }}\n      </p>\n    </div>\n    \n    <slot name=\"actions\"></slot>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { useRouter } from 'vue-router';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true\n  },\n  clickable: {\n    type: Boolean,\n    default: true\n  },\n  showStatus: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst router = useRouter();\n\nconst handleClick = () => {\n  if (!props.clickable) return;\n  \n  router.push({\n    name: 'artist',\n    params: { url: props.artist.url }\n  });\n};\n</script>\n\n<style scoped>\n.artist-card {\n  border: 1px solid rgba(var(--grey), 0.2);\n  transition: transform 0.2s ease;\n}\n\n.hover-scale-1:hover {\n  transform: scale(1.02);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,QAAQ;AAed,UAAM,SAAS,UAAS;AAExB,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,MAAM,UAAW;AAEtB,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,QAAQ,EAAE,KAAK,MAAM,OAAO,IAAG;AAAA,MACnC,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/cards/PlaylistCard.vue.cjs

@@ -5,13 +5,17 @@ const Media = require("../../../../components/Media/Media.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const IconPlay = require("../../../icons/navigation/IconPlay.vue.cjs");
 const player = require("../../store/player.cjs");
+const playlists = require("../../store/playlists.cjs");
 ;/* empty css                    */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
 const _hoisted_1 = { class: "playlist-cover pos-relative" };
-const _hoisted_2 = { class: "playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out" };
-const _hoisted_3 = { class: "playlist-info pd-small bg-dark-transp-20" };
-const _hoisted_4 = { class: "t-medium t-truncate" };
-const _hoisted_5 = { class: "t-grey t-small t-truncate" };
+const _hoisted_2 = {
+  key: 0,
+  class: "playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out"
+};
+const _hoisted_3 = { class: "playlist-info pd-small bg-light" };
+const _hoisted_4 = { class: "t-medium mn-b-small t-truncate" };
+const _hoisted_5 = { class: "t-transp t-small t-truncate" };
 const _sfc_main = {
   __name: "PlaylistCard",
   props: {
@@ -32,10 +36,24 @@ const _sfc_main = {
       }
       return `${creatorName} • ${trackCount} ${trackCount === 1 ? "track" : "tracks"}`;
     });
-    const playPlaylist = (playlist) => {
-      const tracks = playlist.tracks?.map((item) => item.track).filter((track) => track) || [];
-      if (tracks.length > 0) {
-        player.actions.setQueue(tracks);
+    const playPlaylist = async (playlist) => {
+      if (!playlist || !playlist.url) {
+        console.warn("Playlist or URL not available");
+        return;
+      }
+      try {
+        console.log("Loading playlist:", playlist.url);
+        await playlists.actions.fetchPlaylistByUrl(playlist.url);
+        const tracks = playlists.state.currentPlaylistTracks || [];
+        console.log("Loaded tracks:", tracks);
+        if (tracks.length > 0) {
+          console.log("Setting queue with tracks:", tracks);
+          player.actions.setQueue(tracks);
+        } else {
+          console.warn("No tracks found in playlist after loading");
+        }
+      } catch (error) {
+        console.error("Error loading playlist for playback:", error);
       }
     };
     return (_ctx, _cache) => {
@@ -47,12 +65,12 @@ const _sfc_main = {
         default: vue.withCtx(() => [
           vue.createElementVNode("div", _hoisted_1, [
             vue.createVNode(Media.default, {
-              url: __props.playlist.coverUrl || "/assets/placeholder-playlist.jpg",
+              url: __props.playlist.coverUrl || "/logo/logo-placeholder.jpg",
               class: "w-100 aspect-1x1 object-fit-cover"
             }, null, 8, ["url"]),
-            vue.createElementVNode("div", _hoisted_2, [
+            __props.playlist.tracks && __props.playlist.tracks.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
               vue.createVNode(Button.default, {
-                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => playPlaylist(__props.playlist), ["stop"])),
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => playPlaylist(__props.playlist), ["stop", "prevent"])),
                 class: "play-button bg-main radius-round flex-center flex aspect-1x1",
                 showLoader: false,
                 showSucces: false
@@ -65,7 +83,7 @@ const _sfc_main = {
                 ]),
                 _: 1
               })
-            ])
+            ])) : vue.createCommentVNode("", true)
           ]),
           vue.createElementVNode("div", _hoisted_3, [
             vue.createElementVNode("h3", _hoisted_4, vue.toDisplayString(__props.playlist.title), 1),
@@ -77,6 +95,6 @@ const _sfc_main = {
     };
   }
 };
-const PlaylistCard = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-238f47e7"]]);
+const PlaylistCard = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-be2a71af"]]);
 exports.default = PlaylistCard;
 //# sourceMappingURL=PlaylistCard.vue.cjs.map

package/dist/martyrs/src/modules/music/components/cards/PlaylistCard.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PlaylistCard.vue.cjs","sources":["../../../../../../../src/modules/music/components/cards/PlaylistCard.vue"],"sourcesContent":["<!-- components/cards/PlaylistCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'playlist', params: { url: playlist.url } }\" \n    class=\"playlist-card d-block radius-small o-hidden\"\n  >\n    <div class=\"playlist-cover pos-relative\">\n      <Media \n        :url=\"playlist.coverUrl || '/assets/placeholder-playlist.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div class=\"playlist-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=\"playPlaylist(playlist)\" \n          class=\"play-button bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"playlist-info pd-small bg-dark-transp-20\">\n      <h3 class=\" t-medium t-truncate\">{{ playlist.title }}</h3>\n      <p class=\"t-grey t-small t-truncate\">{{ playlistInfo }}</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\nimport { actions as playerActions } from '../../store/player.js';\n\nconst props = defineProps({\n  playlist: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst playlistInfo = computed(() => {\n  const trackCount = props.playlist.tracks?.length || 0;\n  let creatorName = 'Unknown';\n  \n  if (props.playlist.creator?.target?.profile?.name) {\n    creatorName = props.playlist.creator.target.profile.name;\n  } else if (props.playlist.creator?.target?.name) {\n    creatorName = props.playlist.creator.target.name;\n  }\n  \n  return `${creatorName} • ${trackCount} ${trackCount === 1 ? 'track' : 'tracks'}`;\n});\n\n// Methods\nconst playPlaylist = (playlist) => {\n  // Extract tracks from playlist\n  const tracks = playlist.tracks?.map(item => item.track).filter(track => track) || [];\n  \n  if (tracks.length > 0) {\n    playerActions.setQueue(tracks);\n  }\n};\n</script>\n\n<style scoped>\n.playlist-card {\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover {\n  transform: translateY(-5px);\n}\n\n.playlist-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.playlist-card:hover .playlist-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  width: 48px;\n  height: 48px;\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["computed","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsCA,UAAM,QAAQ;AAQd,UAAM,eAAeA,IAAAA,SAAS,MAAM;AAClC,YAAM,aAAa,MAAM,SAAS,QAAQ,UAAU;AACpD,UAAI,cAAc;AAElB,UAAI,MAAM,SAAS,SAAS,QAAQ,SAAS,MAAM;AACjD,sBAAc,MAAM,SAAS,QAAQ,OAAO,QAAQ;AAAA,MACtD,WAAW,MAAM,SAAS,SAAS,QAAQ,MAAM;AAC/C,sBAAc,MAAM,SAAS,QAAQ,OAAO;AAAA,MAC9C;AAEA,aAAO,GAAG,WAAW,MAAM,UAAU,IAAI,eAAe,IAAI,UAAU,QAAQ;AAAA,IAChF,CAAC;AAGD,UAAM,eAAe,CAAC,aAAa;AAEjC,YAAM,SAAS,SAAS,QAAQ,IAAI,UAAQ,KAAK,KAAK,EAAE,OAAO,WAAS,KAAK,KAAK,CAAA;AAElF,UAAI,OAAO,SAAS,GAAG;AACrBC,eAAAA,QAAc,SAAS,MAAM;AAAA,MAC/B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlaylistCard.vue.cjs","sources":["../../../../../../../src/modules/music/components/cards/PlaylistCard.vue"],"sourcesContent":["<!-- components/cards/PlaylistCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'playlist', params: { url: playlist.url } }\" \n    class=\"playlist-card d-block radius-small o-hidden\"\n  >\n    <div class=\"playlist-cover pos-relative\">\n      <Media \n        :url=\"playlist.coverUrl || '/logo/logo-placeholder.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div v-if=\"playlist.tracks && playlist.tracks.length > 0\" class=\"playlist-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=\"playPlaylist(playlist)\" \n          class=\"play-button bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"playlist-info pd-small bg-light\">\n      <h3 class=\" t-medium mn-b-small t-truncate\">{{ playlist.title }}</h3>\n      <p class=\"t-transp t-small t-truncate\">{{ playlistInfo }}</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\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\n\nconst props = defineProps({\n  playlist: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst playlistInfo = computed(() => {\n  const trackCount = props.playlist.tracks?.length || 0;\n  let creatorName = 'Unknown';\n  \n  if (props.playlist.creator?.target?.profile?.name) {\n    creatorName = props.playlist.creator.target.profile.name;\n  } else if (props.playlist.creator?.target?.name) {\n    creatorName = props.playlist.creator.target.name;\n  }\n  \n  return `${creatorName} • ${trackCount} ${trackCount === 1 ? 'track' : 'tracks'}`;\n});\n\n// Methods\nconst playPlaylist = async (playlist) => {\n  if (!playlist || !playlist.url) {\n    console.warn('Playlist or URL not available');\n    return;\n  }\n  \n  try {\n    console.log('Loading playlist:', playlist.url);\n    \n    // Fetch full playlist data with populated tracks\n    await playlistsActions.fetchPlaylistByUrl(playlist.url);\n    \n    // Get tracks from store after loading\n    const tracks = playlistsState.currentPlaylistTracks || [];\n    \n    console.log('Loaded tracks:', tracks);\n    \n    if (tracks.length > 0) {\n      console.log('Setting queue with tracks:', tracks);\n      playerActions.setQueue(tracks);\n    } else {\n      console.warn('No tracks found in playlist after loading');\n    }\n  } catch (error) {\n    console.error('Error loading playlist for playback:', error);\n  }\n};\n</script>\n\n<style scoped>\n.playlist-card {\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover {\n  transform: translateY(-5px);\n}\n\n.playlist-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.playlist-card:hover .playlist-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  width: 48px;\n  height: 48px;\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["computed","playlistsActions","playlistsState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,eAAeA,IAAAA,SAAS,MAAM;AAClC,YAAM,aAAa,MAAM,SAAS,QAAQ,UAAU;AACpD,UAAI,cAAc;AAElB,UAAI,MAAM,SAAS,SAAS,QAAQ,SAAS,MAAM;AACjD,sBAAc,MAAM,SAAS,QAAQ,OAAO,QAAQ;AAAA,MACtD,WAAW,MAAM,SAAS,SAAS,QAAQ,MAAM;AAC/C,sBAAc,MAAM,SAAS,QAAQ,OAAO;AAAA,MAC9C;AAEA,aAAO,GAAG,WAAW,MAAM,UAAU,IAAI,eAAe,IAAI,UAAU,QAAQ;AAAA,IAChF,CAAC;AAGD,UAAM,eAAe,OAAO,aAAa;AACvC,UAAI,CAAC,YAAY,CAAC,SAAS,KAAK;AAC9B,gBAAQ,KAAK,+BAA+B;AAC5C;AAAA,MACF;AAEA,UAAI;AACF,gBAAQ,IAAI,qBAAqB,SAAS,GAAG;AAG7C,cAAMC,kBAAiB,mBAAmB,SAAS,GAAG;AAGtD,cAAM,SAASC,gBAAe,yBAAyB,CAAA;AAEvD,gBAAQ,IAAI,kBAAkB,MAAM;AAEpC,YAAI,OAAO,SAAS,GAAG;AACrB,kBAAQ,IAAI,8BAA8B,MAAM;AAChDC,iBAAAA,QAAc,SAAS,MAAM;AAAA,QAC/B,OAAO;AACL,kBAAQ,KAAK,2CAA2C;AAAA,QAC1D;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,wCAAwC,KAAK;AAAA,MAC7D;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,15 +1,19 @@
-import { computed, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createVNode, withModifiers, toDisplayString } from "vue";
+import { computed, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createVNode, createElementBlock, createCommentVNode, withModifiers, toDisplayString } from "vue";
 import Media from "../../../../components/Media/Media.vue.js";
 import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconPlay.vue.js";
-import { actions } from "../../store/player.js";
+import { actions as actions$1 } from "../../store/player.js";
+import { actions, state } from "../../store/playlists.js";
 /* empty css                  */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "playlist-cover pos-relative" };
-const _hoisted_2 = { class: "playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out" };
-const _hoisted_3 = { class: "playlist-info pd-small bg-dark-transp-20" };
-const _hoisted_4 = { class: "t-medium t-truncate" };
-const _hoisted_5 = { class: "t-grey t-small t-truncate" };
+const _hoisted_2 = {
+  key: 0,
+  class: "playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out"
+};
+const _hoisted_3 = { class: "playlist-info pd-small bg-light" };
+const _hoisted_4 = { class: "t-medium mn-b-small t-truncate" };
+const _hoisted_5 = { class: "t-transp t-small t-truncate" };
 const _sfc_main = {
   __name: "PlaylistCard",
   props: {
@@ -30,10 +34,24 @@ const _sfc_main = {
       }
       return `${creatorName} • ${trackCount} ${trackCount === 1 ? "track" : "tracks"}`;
     });
-    const playPlaylist = (playlist) => {
-      const tracks = playlist.tracks?.map((item) => item.track).filter((track) => track) || [];
-      if (tracks.length > 0) {
-        actions.setQueue(tracks);
+    const playPlaylist = async (playlist) => {
+      if (!playlist || !playlist.url) {
+        console.warn("Playlist or URL not available");
+        return;
+      }
+      try {
+        console.log("Loading playlist:", playlist.url);
+        await actions.fetchPlaylistByUrl(playlist.url);
+        const tracks = state.currentPlaylistTracks || [];
+        console.log("Loaded tracks:", tracks);
+        if (tracks.length > 0) {
+          console.log("Setting queue with tracks:", tracks);
+          actions$1.setQueue(tracks);
+        } else {
+          console.warn("No tracks found in playlist after loading");
+        }
+      } catch (error) {
+        console.error("Error loading playlist for playback:", error);
       }
     };
     return (_ctx, _cache) => {
@@ -45,12 +63,12 @@ const _sfc_main = {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
             createVNode(Media, {
-              url: __props.playlist.coverUrl || "/assets/placeholder-playlist.jpg",
+              url: __props.playlist.coverUrl || "/logo/logo-placeholder.jpg",
               class: "w-100 aspect-1x1 object-fit-cover"
             }, null, 8, ["url"]),
-            createElementVNode("div", _hoisted_2, [
+            __props.playlist.tracks && __props.playlist.tracks.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
               createVNode(_sfc_main$1, {
-                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => playPlaylist(__props.playlist), ["stop"])),
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => playPlaylist(__props.playlist), ["stop", "prevent"])),
                 class: "play-button bg-main radius-round flex-center flex aspect-1x1",
                 showLoader: false,
                 showSucces: false
@@ -63,7 +81,7 @@ const _sfc_main = {
                 ]),
                 _: 1
               })
-            ])
+            ])) : createCommentVNode("", true)
           ]),
           createElementVNode("div", _hoisted_3, [
             createElementVNode("h3", _hoisted_4, toDisplayString(__props.playlist.title), 1),
@@ -75,7 +93,7 @@ const _sfc_main = {
     };
   }
 };
-const PlaylistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-238f47e7"]]);
+const PlaylistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-be2a71af"]]);
 export {
   PlaylistCard as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PlaylistCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/PlaylistCard.vue"],"sourcesContent":["<!-- components/cards/PlaylistCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'playlist', params: { url: playlist.url } }\" \n    class=\"playlist-card d-block radius-small o-hidden\"\n  >\n    <div class=\"playlist-cover pos-relative\">\n      <Media \n        :url=\"playlist.coverUrl || '/assets/placeholder-playlist.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div class=\"playlist-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=\"playPlaylist(playlist)\" \n          class=\"play-button bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"playlist-info pd-small bg-dark-transp-20\">\n      <h3 class=\" t-medium t-truncate\">{{ playlist.title }}</h3>\n      <p class=\"t-grey t-small t-truncate\">{{ playlistInfo }}</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\nimport { actions as playerActions } from '../../store/player.js';\n\nconst props = defineProps({\n  playlist: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst playlistInfo = computed(() => {\n  const trackCount = props.playlist.tracks?.length || 0;\n  let creatorName = 'Unknown';\n  \n  if (props.playlist.creator?.target?.profile?.name) {\n    creatorName = props.playlist.creator.target.profile.name;\n  } else if (props.playlist.creator?.target?.name) {\n    creatorName = props.playlist.creator.target.name;\n  }\n  \n  return `${creatorName} • ${trackCount} ${trackCount === 1 ? 'track' : 'tracks'}`;\n});\n\n// Methods\nconst playPlaylist = (playlist) => {\n  // Extract tracks from playlist\n  const tracks = playlist.tracks?.map(item => item.track).filter(track => track) || [];\n  \n  if (tracks.length > 0) {\n    playerActions.setQueue(tracks);\n  }\n};\n</script>\n\n<style scoped>\n.playlist-card {\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover {\n  transform: translateY(-5px);\n}\n\n.playlist-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.playlist-card:hover .playlist-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  width: 48px;\n  height: 48px;\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsCA,UAAM,QAAQ;AAQd,UAAM,eAAe,SAAS,MAAM;AAClC,YAAM,aAAa,MAAM,SAAS,QAAQ,UAAU;AACpD,UAAI,cAAc;AAElB,UAAI,MAAM,SAAS,SAAS,QAAQ,SAAS,MAAM;AACjD,sBAAc,MAAM,SAAS,QAAQ,OAAO,QAAQ;AAAA,MACtD,WAAW,MAAM,SAAS,SAAS,QAAQ,MAAM;AAC/C,sBAAc,MAAM,SAAS,QAAQ,OAAO;AAAA,MAC9C;AAEA,aAAO,GAAG,WAAW,MAAM,UAAU,IAAI,eAAe,IAAI,UAAU,QAAQ;AAAA,IAChF,CAAC;AAGD,UAAM,eAAe,CAAC,aAAa;AAEjC,YAAM,SAAS,SAAS,QAAQ,IAAI,UAAQ,KAAK,KAAK,EAAE,OAAO,WAAS,KAAK,KAAK,CAAA;AAElF,UAAI,OAAO,SAAS,GAAG;AACrBA,gBAAc,SAAS,MAAM;AAAA,MAC/B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlaylistCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/PlaylistCard.vue"],"sourcesContent":["<!-- components/cards/PlaylistCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'playlist', params: { url: playlist.url } }\" \n    class=\"playlist-card d-block radius-small o-hidden\"\n  >\n    <div class=\"playlist-cover pos-relative\">\n      <Media \n        :url=\"playlist.coverUrl || '/logo/logo-placeholder.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div v-if=\"playlist.tracks && playlist.tracks.length > 0\" class=\"playlist-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=\"playPlaylist(playlist)\" \n          class=\"play-button bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"playlist-info pd-small bg-light\">\n      <h3 class=\" t-medium mn-b-small t-truncate\">{{ playlist.title }}</h3>\n      <p class=\"t-transp t-small t-truncate\">{{ playlistInfo }}</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\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\n\nconst props = defineProps({\n  playlist: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst playlistInfo = computed(() => {\n  const trackCount = props.playlist.tracks?.length || 0;\n  let creatorName = 'Unknown';\n  \n  if (props.playlist.creator?.target?.profile?.name) {\n    creatorName = props.playlist.creator.target.profile.name;\n  } else if (props.playlist.creator?.target?.name) {\n    creatorName = props.playlist.creator.target.name;\n  }\n  \n  return `${creatorName} • ${trackCount} ${trackCount === 1 ? 'track' : 'tracks'}`;\n});\n\n// Methods\nconst playPlaylist = async (playlist) => {\n  if (!playlist || !playlist.url) {\n    console.warn('Playlist or URL not available');\n    return;\n  }\n  \n  try {\n    console.log('Loading playlist:', playlist.url);\n    \n    // Fetch full playlist data with populated tracks\n    await playlistsActions.fetchPlaylistByUrl(playlist.url);\n    \n    // Get tracks from store after loading\n    const tracks = playlistsState.currentPlaylistTracks || [];\n    \n    console.log('Loaded tracks:', tracks);\n    \n    if (tracks.length > 0) {\n      console.log('Setting queue with tracks:', tracks);\n      playerActions.setQueue(tracks);\n    } else {\n      console.warn('No tracks found in playlist after loading');\n    }\n  } catch (error) {\n    console.error('Error loading playlist for playback:', error);\n  }\n};\n</script>\n\n<style scoped>\n.playlist-card {\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover {\n  transform: translateY(-5px);\n}\n\n.playlist-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.playlist-card:hover .playlist-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  width: 48px;\n  height: 48px;\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["playlistsActions","playlistsState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,eAAe,SAAS,MAAM;AAClC,YAAM,aAAa,MAAM,SAAS,QAAQ,UAAU;AACpD,UAAI,cAAc;AAElB,UAAI,MAAM,SAAS,SAAS,QAAQ,SAAS,MAAM;AACjD,sBAAc,MAAM,SAAS,QAAQ,OAAO,QAAQ;AAAA,MACtD,WAAW,MAAM,SAAS,SAAS,QAAQ,MAAM;AAC/C,sBAAc,MAAM,SAAS,QAAQ,OAAO;AAAA,MAC9C;AAEA,aAAO,GAAG,WAAW,MAAM,UAAU,IAAI,eAAe,IAAI,UAAU,QAAQ;AAAA,IAChF,CAAC;AAGD,UAAM,eAAe,OAAO,aAAa;AACvC,UAAI,CAAC,YAAY,CAAC,SAAS,KAAK;AAC9B,gBAAQ,KAAK,+BAA+B;AAC5C;AAAA,MACF;AAEA,UAAI;AACF,gBAAQ,IAAI,qBAAqB,SAAS,GAAG;AAG7C,cAAMA,QAAiB,mBAAmB,SAAS,GAAG;AAGtD,cAAM,SAASC,MAAe,yBAAyB,CAAA;AAEvD,gBAAQ,IAAI,kBAAkB,MAAM;AAEpC,YAAI,OAAO,SAAS,GAAG;AACrB,kBAAQ,IAAI,8BAA8B,MAAM;AAChDC,oBAAc,SAAS,MAAM;AAAA,QAC/B,OAAO;AACL,kBAAQ,KAAK,2CAA2C;AAAA,QAC1D;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,wCAAwC,KAAK;AAAA,MAC7D;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}