@ozdao/martyrs 0.2.484 → 0.2.486

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

@@ -0,0 +1,87 @@
+import { computed, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createVNode, 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 { state, actions as actions$1 } from "../../store/albums.js";
+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-white t-medium t-truncate" };
+const _hoisted_5 = { class: "t-grey t-small t-truncate" };
+const _sfc_main = {
+  __name: "AlbumCard",
+  props: {
+    album: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const albumInfo = computed(() => {
+      var _a;
+      const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : "";
+      let artistName = "Unknown Artist";
+      if ((_a = props.album.artist) == null ? void 0 : _a.name) {
+        artistName = props.album.artist.name;
+      } else if (typeof props.album.artist === "string") {
+        artistName = props.album.artist;
+      }
+      return releaseYear ? `${artistName} • ${releaseYear}` : artistName;
+    });
+    const playAlbum = async (album) => {
+      if (state.currentAlbum && state.currentAlbum._id === album._id && state.currentAlbumTracks.length > 0) {
+        actions.setQueue(state.currentAlbumTracks);
+        return;
+      }
+      const tracks = await actions$1.fetchAlbumTracks(album._id);
+      if (tracks && tracks.length > 0) {
+        actions.setQueue(tracks);
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_router_link = resolveComponent("router-link");
+      return openBlock(), createBlock(_component_router_link, {
+        to: { name: "album-detail", params: { url: __props.album.url } },
+        class: "album-card d-block radius-small o-hidden"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(Media, {
+              url: __props.album.coverUrl || "/assets/placeholder-album.jpg",
+              class: "w-100 aspect-1x1 object-fit-cover"
+            }, null, 8, ["url"]),
+            createElementVNode("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",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$2, {
+                    class: "i-small",
+                    fill: "rgb(var(--black))"
+                  })
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("h3", _hoisted_4, toDisplayString(__props.album.title), 1),
+            createElementVNode("p", _hoisted_5, toDisplayString(albumInfo.value), 1)
+          ])
+        ]),
+        _: 1
+      }, 8, ["to"]);
+    };
+  }
+};
+const AlbumCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b94f361e"]]);
+export {
+  AlbumCard as default
+};
+//# sourceMappingURL=AlbumCard.vue.js.map

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

@@ -0,0 +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-detail', 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-white 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,YAAa,IAAG;AAChG,UAAI,aAAa;AAEjB,WAAI,WAAM,MAAM,WAAZ,mBAAoB,MAAM;AAC5B,qBAAa,MAAM,MAAM,OAAO;AAAA,MACjC,WAAU,OAAO,MAAM,MAAM,WAAW,UAAU;AACjD,qBAAa,MAAM,MAAM;AAAA,MAC7B;AAEE,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,MACJ;AAGE,YAAM,SAAS,MAAME,UAAc,iBAAiB,MAAM,GAAG;AAE7D,UAAI,UAAU,OAAO,SAAS,GAAG;AAC/BD,gBAAc,SAAS,MAAM;AAAA,MACjC;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = { class: "artist-image w-100 pos-relative aspect-1x1" };
+const _hoisted_2 = ["src", "alt"];
+const _hoisted_3 = {
+  key: 1,
+  class: "w-100 h-100 bg-light flex-center flex"
+};
+const _hoisted_4 = { class: "h3" };
+const _hoisted_5 = { class: "t-white p-small" };
+const _hoisted_6 = { class: "pd-small" };
+const _hoisted_7 = { class: "mn-b-micro t-trim-2" };
+const _hoisted_8 = {
+  key: 0,
+  class: "p-small t-transp t-trim"
+};
+const _sfc_main = {
+  __name: "ArtistCard",
+  props: {
+    artist: {
+      type: Object,
+      required: true
+    },
+    clickable: {
+      type: Boolean,
+      default: true
+    },
+    showStatus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const router = vueRouter.useRouter();
+    const handleClick = () => {
+      if (!props.clickable) return;
+      router.push({
+        name: "artist-detail",
+        params: { url: props.artist.url }
+      });
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["artist-card flex flex-column radius-medium o-hidden bg-white", { "cursor-pointer hover-scale-1": __props.clickable }]),
+        onClick: handleClick
+      }, [
+        vue.createElementVNode("div", _hoisted_1, [
+          __props.artist.photo ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 0,
+            src: _ctx.FILE_SERVER_URL + __props.artist.photo,
+            alt: __props.artist.name,
+            class: "w-100 h-100 object-fit-cover",
+            loading: "lazy"
+          }, null, 8, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+            vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(__props.artist.name ? __props.artist.name.charAt(0) : "?"), 1)
+          ])),
+          __props.showStatus ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 2,
+            class: vue.normalizeClass(["pos-absolute pos-t-small pos-r-small pd-micro radius-medium", {
+              "bg-second": __props.artist.status === "published",
+              "bg-fifth": __props.artist.status === "featured",
+              "bg-grey": __props.artist.status === "draft"
+            }])
+          }, [
+            vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(__props.artist.status), 1)
+          ], 2)) : vue.createCommentVNode("", true)
+        ]),
+        vue.createElementVNode("div", _hoisted_6, [
+          vue.createElementVNode("h4", _hoisted_7, vue.toDisplayString(__props.artist.name), 1),
+          __props.artist.genres && __props.artist.genres.length ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_8, vue.toDisplayString(__props.artist.genres.join(", ")), 1)) : vue.createCommentVNode("", true)
+        ]),
+        vue.renderSlot(_ctx.$slots, "actions", {}, void 0, true)
+      ], 2);
+    };
+  }
+};
+const ArtistCard = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-4e655a89"]]);
+exports.default = ArtistCard;
+//# sourceMappingURL=ArtistCard.vue.cjs.map

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

@@ -0,0 +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=\"t-white 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-detail',\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,UAAW;AAE1B,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

@@ -0,0 +1,83 @@
+import { createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, toDisplayString } from "vue";
+import { useRouter } from "vue-router";
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "artist-image w-100 pos-relative aspect-1x1" };
+const _hoisted_2 = ["src", "alt"];
+const _hoisted_3 = {
+  key: 1,
+  class: "w-100 h-100 bg-light flex-center flex"
+};
+const _hoisted_4 = { class: "h3" };
+const _hoisted_5 = { class: "t-white p-small" };
+const _hoisted_6 = { class: "pd-small" };
+const _hoisted_7 = { class: "mn-b-micro t-trim-2" };
+const _hoisted_8 = {
+  key: 0,
+  class: "p-small t-transp t-trim"
+};
+const _sfc_main = {
+  __name: "ArtistCard",
+  props: {
+    artist: {
+      type: Object,
+      required: true
+    },
+    clickable: {
+      type: Boolean,
+      default: true
+    },
+    showStatus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const router = useRouter();
+    const handleClick = () => {
+      if (!props.clickable) return;
+      router.push({
+        name: "artist-detail",
+        params: { url: props.artist.url }
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["artist-card flex flex-column radius-medium o-hidden bg-white", { "cursor-pointer hover-scale-1": __props.clickable }]),
+        onClick: handleClick
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          __props.artist.photo ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: _ctx.FILE_SERVER_URL + __props.artist.photo,
+            alt: __props.artist.name,
+            class: "w-100 h-100 object-fit-cover",
+            loading: "lazy"
+          }, null, 8, _hoisted_2)) : (openBlock(), createElementBlock("div", _hoisted_3, [
+            createElementVNode("span", _hoisted_4, toDisplayString(__props.artist.name ? __props.artist.name.charAt(0) : "?"), 1)
+          ])),
+          __props.showStatus ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            class: normalizeClass(["pos-absolute pos-t-small pos-r-small pd-micro radius-medium", {
+              "bg-second": __props.artist.status === "published",
+              "bg-fifth": __props.artist.status === "featured",
+              "bg-grey": __props.artist.status === "draft"
+            }])
+          }, [
+            createElementVNode("span", _hoisted_5, toDisplayString(__props.artist.status), 1)
+          ], 2)) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_6, [
+          createElementVNode("h4", _hoisted_7, toDisplayString(__props.artist.name), 1),
+          __props.artist.genres && __props.artist.genres.length ? (openBlock(), createElementBlock("p", _hoisted_8, toDisplayString(__props.artist.genres.join(", ")), 1)) : createCommentVNode("", true)
+        ]),
+        renderSlot(_ctx.$slots, "actions", {}, void 0, true)
+      ], 2);
+    };
+  }
+};
+const ArtistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4e655a89"]]);
+export {
+  ArtistCard as default
+};
+//# sourceMappingURL=ArtistCard.vue.js.map

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

@@ -0,0 +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=\"t-white 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-detail',\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,UAAW;AAE1B,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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+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 _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-white t-medium t-truncate" };
+const _hoisted_5 = { class: "t-grey t-small t-truncate" };
+const _sfc_main = {
+  __name: "PlaylistCard",
+  props: {
+    playlist: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const playlistInfo = vue.computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      const trackCount = ((_a = props.playlist.tracks) == null ? void 0 : _a.length) || 0;
+      let creatorName = "Unknown";
+      if ((_d = (_c = (_b = props.playlist.creator) == null ? void 0 : _b.target) == null ? void 0 : _c.profile) == null ? void 0 : _d.name) {
+        creatorName = props.playlist.creator.target.profile.name;
+      } else if ((_f = (_e = props.playlist.creator) == null ? void 0 : _e.target) == null ? void 0 : _f.name) {
+        creatorName = props.playlist.creator.target.name;
+      }
+      return `${creatorName} • ${trackCount} ${trackCount === 1 ? "track" : "tracks"}`;
+    });
+    const playPlaylist = (playlist) => {
+      var _a;
+      const tracks = ((_a = playlist.tracks) == null ? void 0 : _a.map((item) => item.track).filter((track) => track)) || [];
+      if (tracks.length > 0) {
+        player.actions.setQueue(tracks);
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_router_link = vue.resolveComponent("router-link");
+      return vue.openBlock(), vue.createBlock(_component_router_link, {
+        to: { name: "playlist-detail", params: { url: __props.playlist.url } },
+        class: "playlist-card d-block radius-small o-hidden"
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createVNode(Media.default, {
+              url: __props.playlist.coverUrl || "/assets/placeholder-playlist.jpg",
+              class: "w-100 aspect-1x1 object-fit-cover"
+            }, null, 8, ["url"]),
+            vue.createElementVNode("div", _hoisted_2, [
+              vue.createVNode(Button.default, {
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => playPlaylist(__props.playlist), ["stop"])),
+                class: "play-button 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))"
+                  })
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createElementVNode("h3", _hoisted_4, vue.toDisplayString(__props.playlist.title), 1),
+            vue.createElementVNode("p", _hoisted_5, vue.toDisplayString(playlistInfo.value), 1)
+          ])
+        ]),
+        _: 1
+      }, 8, ["to"]);
+    };
+  }
+};
+const PlaylistCard = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-fb577898"]]);
+exports.default = PlaylistCard;
+//# sourceMappingURL=PlaylistCard.vue.cjs.map

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

@@ -0,0 +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-detail', 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-white 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,IAAQ,SAAC,MAAM;;AAClC,YAAM,eAAa,WAAM,SAAS,WAAf,mBAAuB,WAAU;AACpD,UAAI,cAAc;AAElB,WAAI,uBAAM,SAAS,YAAf,mBAAwB,WAAxB,mBAAgC,YAAhC,mBAAyC,MAAM;AACjD,sBAAc,MAAM,SAAS,QAAQ,OAAO,QAAQ;AAAA,MACrD,YAAU,iBAAM,SAAS,YAAf,mBAAwB,WAAxB,mBAAgC,MAAM;AAC/C,sBAAc,MAAM,SAAS,QAAQ,OAAO;AAAA,MAChD;AAEE,aAAO,GAAG,WAAW,MAAM,UAAU,IAAI,eAAe,IAAI,UAAU,QAAQ;AAAA,IAChF,CAAC;AAGD,UAAM,eAAe,CAAC,aAAa;;AAEjC,YAAM,WAAS,cAAS,WAAT,mBAAiB,IAAI,UAAQ,KAAK,OAAO,OAAO,WAAS,WAAU,CAAE;AAEpF,UAAI,OAAO,SAAS,GAAG;AACrBC,eAAa,QAAC,SAAS,MAAM;AAAA,MACjC;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,83 @@
+import { computed, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createVNode, 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 _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-white t-medium t-truncate" };
+const _hoisted_5 = { class: "t-grey t-small t-truncate" };
+const _sfc_main = {
+  __name: "PlaylistCard",
+  props: {
+    playlist: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const playlistInfo = computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      const trackCount = ((_a = props.playlist.tracks) == null ? void 0 : _a.length) || 0;
+      let creatorName = "Unknown";
+      if ((_d = (_c = (_b = props.playlist.creator) == null ? void 0 : _b.target) == null ? void 0 : _c.profile) == null ? void 0 : _d.name) {
+        creatorName = props.playlist.creator.target.profile.name;
+      } else if ((_f = (_e = props.playlist.creator) == null ? void 0 : _e.target) == null ? void 0 : _f.name) {
+        creatorName = props.playlist.creator.target.name;
+      }
+      return `${creatorName} • ${trackCount} ${trackCount === 1 ? "track" : "tracks"}`;
+    });
+    const playPlaylist = (playlist) => {
+      var _a;
+      const tracks = ((_a = playlist.tracks) == null ? void 0 : _a.map((item) => item.track).filter((track) => track)) || [];
+      if (tracks.length > 0) {
+        actions.setQueue(tracks);
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_router_link = resolveComponent("router-link");
+      return openBlock(), createBlock(_component_router_link, {
+        to: { name: "playlist-detail", params: { url: __props.playlist.url } },
+        class: "playlist-card d-block radius-small o-hidden"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(Media, {
+              url: __props.playlist.coverUrl || "/assets/placeholder-playlist.jpg",
+              class: "w-100 aspect-1x1 object-fit-cover"
+            }, null, 8, ["url"]),
+            createElementVNode("div", _hoisted_2, [
+              createVNode(_sfc_main$1, {
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => playPlaylist(__props.playlist), ["stop"])),
+                class: "play-button 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))"
+                  })
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("h3", _hoisted_4, toDisplayString(__props.playlist.title), 1),
+            createElementVNode("p", _hoisted_5, toDisplayString(playlistInfo.value), 1)
+          ])
+        ]),
+        _: 1
+      }, 8, ["to"]);
+    };
+  }
+};
+const PlaylistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fb577898"]]);
+export {
+  PlaylistCard as default
+};
+//# sourceMappingURL=PlaylistCard.vue.js.map

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

@@ -0,0 +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-detail', 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-white 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,eAAa,WAAM,SAAS,WAAf,mBAAuB,WAAU;AACpD,UAAI,cAAc;AAElB,WAAI,uBAAM,SAAS,YAAf,mBAAwB,WAAxB,mBAAgC,YAAhC,mBAAyC,MAAM;AACjD,sBAAc,MAAM,SAAS,QAAQ,OAAO,QAAQ;AAAA,MACrD,YAAU,iBAAM,SAAS,YAAf,mBAAwB,WAAxB,mBAAgC,MAAM;AAC/C,sBAAc,MAAM,SAAS,QAAQ,OAAO;AAAA,MAChD;AAEE,aAAO,GAAG,WAAW,MAAM,UAAU,IAAI,eAAe,IAAI,UAAU,QAAQ;AAAA,IAChF,CAAC;AAGD,UAAM,eAAe,CAAC,aAAa;;AAEjC,YAAM,WAAS,cAAS,WAAT,mBAAiB,IAAI,UAAQ,KAAK,OAAO,OAAO,WAAS,WAAU,CAAE;AAEpF,UAAI,OAAO,SAAS,GAAG;AACrBA,gBAAc,SAAS,MAAM;AAAA,MACjC;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const Media = require("../../../../components/Media/Media.vue.cjs");
+const IconPlay = require("../../../icons/navigation/IconPlay.vue.cjs");
+const player = require("../../store/player.cjs");
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = { class: "track-card-content pd-small flex-v-center flex" };
+const _hoisted_2 = { class: "track-cover mn-r-small" };
+const _hoisted_3 = { class: "track-info flex-1" };
+const _hoisted_4 = { class: "track-name t-white t-truncate" };
+const _hoisted_5 = { class: "track-artist t-grey t-small t-truncate" };
+const _hoisted_6 = { class: "track-play pos-absolute pos-r-0 pos-t-0 h-100 pd-small flex-center flex" };
+const _hoisted_7 = { class: "play-button bg-main radius-round flex-center flex aspect-1x1 i-medium" };
+const _sfc_main = {
+  __name: "TrackCard",
+  props: {
+    track: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const getArtistName = (track) => {
+      if (track.artist) {
+        if (typeof track.artist === "object") {
+          return track.artist.name || "Unknown Artist";
+        }
+        return track.artist;
+      }
+      return "Unknown Artist";
+    };
+    const playTrack = () => {
+      player.actions.playTrack(props.track);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "track-card radius-small o-hidden pos-relative cursor-pointer transition-cubic-in-out bg-dark-transp-20",
+        onClick: playTrack
+      }, [
+        vue.createElementVNode("div", _hoisted_1, [
+          vue.createElementVNode("div", _hoisted_2, [
+            vue.createVNode(Media.default, {
+              url: __props.track.coverUrl || __props.track.album && __props.track.album.coverUrl || "/assets/placeholder-track.jpg",
+              class: "w-3r h-3r object-fit-cover radius-small"
+            }, null, 8, ["url"])
+          ]),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createElementVNode("div", _hoisted_4, vue.toDisplayString(__props.track.title), 1),
+            vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(getArtistName(__props.track)), 1)
+          ]),
+          vue.createElementVNode("div", _hoisted_6, [
+            vue.createElementVNode("div", _hoisted_7, [
+              vue.createVNode(IconPlay.default, {
+                class: "i-small",
+                fill: "rgb(var(--black))"
+              })
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+};
+const TrackCard = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-07d4284b"]]);
+exports.default = TrackCard;
+//# sourceMappingURL=TrackCard.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrackCard.vue.cjs","sources":["../../../../../../../src/modules/music/components/cards/TrackCard.vue"],"sourcesContent":["<!-- components/cards/TrackCard.vue -->\n<template>\n  <div \n    class=\"track-card radius-small o-hidden pos-relative cursor-pointer transition-cubic-in-out bg-dark-transp-20\"\n    @click=\"playTrack\"\n  >\n    <div class=\"track-card-content pd-small flex-v-center flex\">\n      <div class=\"track-cover mn-r-small\">\n        <Media \n          :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/assets/placeholder-track.jpg'\" \n          class=\"w-3r h-3r object-fit-cover radius-small\"\n        />\n      </div>\n      \n      <div class=\"track-info flex-1\">\n        <div class=\"track-name t-white t-truncate\">{{ track.title }}</div>\n        <div class=\"track-artist t-grey t-small t-truncate\">{{ getArtistName(track) }}</div>\n      </div>\n      \n      <div class=\"track-play pos-absolute pos-r-0 pos-t-0 h-100 pd-small flex-center flex\">\n        <div class=\"play-button bg-main radius-round flex-center flex aspect-1x1 i-medium\">\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\"/>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.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  track: {\n    type: Object,\n    required: true\n  }\n});\n\n// Methods\nconst getArtistName = (track) => {\n  if (track.artist) {\n    if (typeof track.artist === 'object') {\n      return track.artist.name || 'Unknown Artist';\n    }\n    return track.artist;\n  }\n  return 'Unknown Artist';\n};\n\nconst playTrack = () => {\n  playerActions.playTrack(props.track);\n};\n</script>\n\n<style scoped>\n.track-card {\n  transition: background-color 0.3s ease;\n}\n\n.track-card:hover {\n  background-color: rgba(var(--dark), 0.4);\n}\n\n.track-play {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.track-card:hover .track-play {\n  opacity: 1;\n}\n\n.play-button {\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.track-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoCA,UAAM,QAAQ;AAQd,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,MAAM,QAAQ;AAChB,YAAI,OAAO,MAAM,WAAW,UAAU;AACpC,iBAAO,MAAM,OAAO,QAAQ;AAAA,QAClC;AACI,eAAO,MAAM;AAAA,MACjB;AACE,aAAO;AAAA,IACT;AAEA,UAAM,YAAY,MAAM;AACtBA,qBAAc,UAAU,MAAM,KAAK;AAAA,IACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,68 @@
+import { createElementBlock, openBlock, createElementVNode, createVNode, toDisplayString } from "vue";
+import Media from "../../../../components/Media/Media.vue.js";
+import _sfc_main$1 from "../../../icons/navigation/IconPlay.vue.js";
+import { actions } from "../../store/player.js";
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "track-card-content pd-small flex-v-center flex" };
+const _hoisted_2 = { class: "track-cover mn-r-small" };
+const _hoisted_3 = { class: "track-info flex-1" };
+const _hoisted_4 = { class: "track-name t-white t-truncate" };
+const _hoisted_5 = { class: "track-artist t-grey t-small t-truncate" };
+const _hoisted_6 = { class: "track-play pos-absolute pos-r-0 pos-t-0 h-100 pd-small flex-center flex" };
+const _hoisted_7 = { class: "play-button bg-main radius-round flex-center flex aspect-1x1 i-medium" };
+const _sfc_main = {
+  __name: "TrackCard",
+  props: {
+    track: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const getArtistName = (track) => {
+      if (track.artist) {
+        if (typeof track.artist === "object") {
+          return track.artist.name || "Unknown Artist";
+        }
+        return track.artist;
+      }
+      return "Unknown Artist";
+    };
+    const playTrack = () => {
+      actions.playTrack(props.track);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "track-card radius-small o-hidden pos-relative cursor-pointer transition-cubic-in-out bg-dark-transp-20",
+        onClick: playTrack
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createVNode(Media, {
+              url: __props.track.coverUrl || __props.track.album && __props.track.album.coverUrl || "/assets/placeholder-track.jpg",
+              class: "w-3r h-3r object-fit-cover radius-small"
+            }, null, 8, ["url"])
+          ]),
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, toDisplayString(__props.track.title), 1),
+            createElementVNode("div", _hoisted_5, toDisplayString(getArtistName(__props.track)), 1)
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            createElementVNode("div", _hoisted_7, [
+              createVNode(_sfc_main$1, {
+                class: "i-small",
+                fill: "rgb(var(--black))"
+              })
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+};
+const TrackCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-07d4284b"]]);
+export {
+  TrackCard as default
+};
+//# sourceMappingURL=TrackCard.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrackCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/TrackCard.vue"],"sourcesContent":["<!-- components/cards/TrackCard.vue -->\n<template>\n  <div \n    class=\"track-card radius-small o-hidden pos-relative cursor-pointer transition-cubic-in-out bg-dark-transp-20\"\n    @click=\"playTrack\"\n  >\n    <div class=\"track-card-content pd-small flex-v-center flex\">\n      <div class=\"track-cover mn-r-small\">\n        <Media \n          :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/assets/placeholder-track.jpg'\" \n          class=\"w-3r h-3r object-fit-cover radius-small\"\n        />\n      </div>\n      \n      <div class=\"track-info flex-1\">\n        <div class=\"track-name t-white t-truncate\">{{ track.title }}</div>\n        <div class=\"track-artist t-grey t-small t-truncate\">{{ getArtistName(track) }}</div>\n      </div>\n      \n      <div class=\"track-play pos-absolute pos-r-0 pos-t-0 h-100 pd-small flex-center flex\">\n        <div class=\"play-button bg-main radius-round flex-center flex aspect-1x1 i-medium\">\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\"/>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.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  track: {\n    type: Object,\n    required: true\n  }\n});\n\n// Methods\nconst getArtistName = (track) => {\n  if (track.artist) {\n    if (typeof track.artist === 'object') {\n      return track.artist.name || 'Unknown Artist';\n    }\n    return track.artist;\n  }\n  return 'Unknown Artist';\n};\n\nconst playTrack = () => {\n  playerActions.playTrack(props.track);\n};\n</script>\n\n<style scoped>\n.track-card {\n  transition: background-color 0.3s ease;\n}\n\n.track-card:hover {\n  background-color: rgba(var(--dark), 0.4);\n}\n\n.track-play {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.track-card:hover .track-play {\n  opacity: 1;\n}\n\n.play-button {\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.track-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,UAAM,QAAQ;AAQd,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,MAAM,QAAQ;AAChB,YAAI,OAAO,MAAM,WAAW,UAAU;AACpC,iBAAO,MAAM,OAAO,QAAQ;AAAA,QAClC;AACI,eAAO,MAAM;AAAA,MACjB;AACE,aAAO;AAAA,IACT;AAEA,UAAM,YAAY,MAAM;AACtBA,cAAc,UAAU,MAAM,KAAK;AAAA,IACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}