@ozdao/martyrs 0.2.492 → 0.2.493

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

@@ -9,7 +9,7 @@ const player = require("../../store/player.cjs");
 const _hoisted_1 = { class: "track-number w-3r t-center pos-relative" };
 const _hoisted_2 = {
   key: 0,
-  class: "t-grey"
+  class: "t-transp"
 };
 const _hoisted_3 = { class: "track-title flex-child-1 flex flex-v-center" };
 const _hoisted_4 = {
@@ -17,14 +17,14 @@ const _hoisted_4 = {
   class: "track-cover mn-r-small"
 };
 const _hoisted_5 = { class: "track-info" };
-const _hoisted_6 = { class: "track-artist t-grey t-small" };
+const _hoisted_6 = { key: 1 };
 const _hoisted_7 = { key: 1 };
 const _hoisted_8 = {
   key: 0,
-  class: "track-album w-15r mobile:w-0 mobile:hidden t-grey t-truncate"
+  class: "track-album w-15r mobile:w-0 mobile:hidden t-transp t-truncate"
 };
 const _hoisted_9 = { key: 1 };
-const _hoisted_10 = { class: "track-duration w-5r t-right t-grey" };
+const _hoisted_10 = { class: "track-duration w-5r t-right t-transp" };
 const _sfc_main = {
   __name: "TrackListCard",
   props: {
@@ -74,22 +74,23 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       const _component_router_link = vue.resolveComponent("router-link");
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["track-item pd-small hover-bg-dark-transp-25 flex-v-center flex cursor-pointer", { "bg-dark-transp-25": isPlaying(__props.track) }]),
-        onClick: _cache[4] || (_cache[4] = ($event) => playTrack(__props.track)),
-        onDblclick: _cache[5] || (_cache[5] = ($event) => playTrack(__props.track, true)),
-        onMouseenter: _cache[6] || (_cache[6] = ($event) => hoveredIndex.value = props.index),
-        onMouseleave: _cache[7] || (_cache[7] = ($event) => hoveredIndex.value = -1)
+        class: vue.normalizeClass(["track-item pd-small hover-bg-dark-transp-25 flex-v-center flex cursor-pointer", { "bg-main-transp-10": isPlaying(__props.track) }]),
+        onClick: _cache[7] || (_cache[7] = ($event) => playTrack(__props.track)),
+        onDblclick: _cache[8] || (_cache[8] = ($event) => playTrack(__props.track, true)),
+        onMouseenter: _cache[9] || (_cache[9] = ($event) => hoveredIndex.value = props.index),
+        onMouseleave: _cache[10] || (_cache[10] = ($event) => hoveredIndex.value = -1)
       }, [
         vue.createElementVNode("div", _hoisted_1, [
           !isPlaying(__props.track) && hoveredIndex.value !== props.index ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(props.index + 1), 1)) : !isPlaying(__props.track) && hoveredIndex.value === props.index ? (vue.openBlock(), vue.createBlock(Button.default, {
             key: 1,
-            onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => playTrack(__props.track), ["stop"])),
-            class: "bg-transparent border-none pd-zero",
+            onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => playTrack(__props.track), ["stop"])),
+            class: "bg-main pd-thin",
             showLoader: false,
             showSucces: false
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(IconPlay.default, {
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => playTrack(__props.track), ["stop"])),
                 class: "i-small",
                 fill: "rgb(var(--white))"
               })
@@ -97,15 +98,16 @@ const _sfc_main = {
             _: 1
           })) : (vue.openBlock(), vue.createBlock(Button.default, {
             key: 2,
-            onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => pauseTrack(), ["stop"])),
-            class: "bg-transparent border-none pd-zero",
+            onClick: _cache[3] || (_cache[3] = vue.withModifiers(($event) => pauseTrack(), ["stop"])),
+            class: "bg-main pd-thin",
             showLoader: false,
             showSucces: false
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(IconPause.default, {
+                onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => pauseTrack(), ["stop"])),
                 class: "i-small",
-                fill: "rgb(var(--main))"
+                fill: "rgb(var(--white))"
               })
             ]),
             _: 1
@@ -114,20 +116,35 @@ const _sfc_main = {
         vue.createElementVNode("div", _hoisted_3, [
           __props.showCover ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
             vue.createVNode(Media.default, {
-              url: __props.track.coverUrl || __props.track.album && __props.track.album.coverUrl || "/assets/placeholder-track.jpg",
+              url: __props.track.coverUrl || __props.track.album && __props.track.album.coverUrl || "/logo/logo-placeholder.jpg",
               class: "w-3r h-3r object-fit-cover o-hidden radius-small"
             }, null, 8, ["url"])
           ])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_5, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["track-name", { "t-main": isPlaying(__props.track) }])
-            }, vue.toDisplayString(__props.track.title), 3),
-            vue.createElementVNode("div", _hoisted_6, [
+            }, [
+              __props.track.url ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                key: 0,
+                to: { name: "track", params: { url: __props.track.url } },
+                class: vue.normalizeClass(["hover-t-main", { "t-main": isPlaying(__props.track) }]),
+                onClick: _cache[4] || (_cache[4] = vue.withModifiers(() => {
+                }, ["stop"]))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(__props.track.title), 1)
+                ]),
+                _: 1
+              }, 8, ["to", "class"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, vue.toDisplayString(__props.track.title), 1))
+            ], 2),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([{ "t-main": isPlaying(__props.track) }, "track-artist t-transp t-small"])
+            }, [
               __props.track.artist && __props.track.artist._id ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                 key: 0,
                 to: { name: "artist", params: { url: __props.track.artist.url } },
-                class: "t-grey hover-",
-                onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+                class: "t-transp hover-",
+                onClick: _cache[5] || (_cache[5] = vue.withModifiers(() => {
                 }, ["stop"]))
               }, {
                 default: vue.withCtx(() => [
@@ -135,15 +152,15 @@ const _sfc_main = {
                 ]),
                 _: 1
               }, 8, ["to"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, vue.toDisplayString(getArtistName(__props.track)), 1))
-            ])
+            ], 2)
           ])
         ]),
         __props.showAlbum ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
           __props.track.album && __props.track.album._id ? (vue.openBlock(), vue.createBlock(_component_router_link, {
             key: 0,
             to: { name: "album", params: { url: __props.track.album.url } },
-            class: "t-grey hover-",
-            onClick: _cache[3] || (_cache[3] = vue.withModifiers(() => {
+            class: "t-transp hover-",
+            onClick: _cache[6] || (_cache[6] = vue.withModifiers(() => {
             }, ["stop"]))
           }, {
             default: vue.withCtx(() => [

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

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

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

@@ -7,7 +7,7 @@ import { actions, state } from "../../store/player.js";
 const _hoisted_1 = { class: "track-number w-3r t-center pos-relative" };
 const _hoisted_2 = {
   key: 0,
-  class: "t-grey"
+  class: "t-transp"
 };
 const _hoisted_3 = { class: "track-title flex-child-1 flex flex-v-center" };
 const _hoisted_4 = {
@@ -15,14 +15,14 @@ const _hoisted_4 = {
   class: "track-cover mn-r-small"
 };
 const _hoisted_5 = { class: "track-info" };
-const _hoisted_6 = { class: "track-artist t-grey t-small" };
+const _hoisted_6 = { key: 1 };
 const _hoisted_7 = { key: 1 };
 const _hoisted_8 = {
   key: 0,
-  class: "track-album w-15r mobile:w-0 mobile:hidden t-grey t-truncate"
+  class: "track-album w-15r mobile:w-0 mobile:hidden t-transp t-truncate"
 };
 const _hoisted_9 = { key: 1 };
-const _hoisted_10 = { class: "track-duration w-5r t-right t-grey" };
+const _hoisted_10 = { class: "track-duration w-5r t-right t-transp" };
 const _sfc_main = {
   __name: "TrackListCard",
   props: {
@@ -72,22 +72,23 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["track-item pd-small hover-bg-dark-transp-25 flex-v-center flex cursor-pointer", { "bg-dark-transp-25": isPlaying(__props.track) }]),
-        onClick: _cache[4] || (_cache[4] = ($event) => playTrack(__props.track)),
-        onDblclick: _cache[5] || (_cache[5] = ($event) => playTrack(__props.track, true)),
-        onMouseenter: _cache[6] || (_cache[6] = ($event) => hoveredIndex.value = props.index),
-        onMouseleave: _cache[7] || (_cache[7] = ($event) => hoveredIndex.value = -1)
+        class: normalizeClass(["track-item pd-small hover-bg-dark-transp-25 flex-v-center flex cursor-pointer", { "bg-main-transp-10": isPlaying(__props.track) }]),
+        onClick: _cache[7] || (_cache[7] = ($event) => playTrack(__props.track)),
+        onDblclick: _cache[8] || (_cache[8] = ($event) => playTrack(__props.track, true)),
+        onMouseenter: _cache[9] || (_cache[9] = ($event) => hoveredIndex.value = props.index),
+        onMouseleave: _cache[10] || (_cache[10] = ($event) => hoveredIndex.value = -1)
       }, [
         createElementVNode("div", _hoisted_1, [
           !isPlaying(__props.track) && hoveredIndex.value !== props.index ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(props.index + 1), 1)) : !isPlaying(__props.track) && hoveredIndex.value === props.index ? (openBlock(), createBlock(_sfc_main$1, {
             key: 1,
-            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => playTrack(__props.track), ["stop"])),
-            class: "bg-transparent border-none pd-zero",
+            onClick: _cache[1] || (_cache[1] = withModifiers(($event) => playTrack(__props.track), ["stop"])),
+            class: "bg-main pd-thin",
             showLoader: false,
             showSucces: false
           }, {
             default: withCtx(() => [
               createVNode(_sfc_main$2, {
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => playTrack(__props.track), ["stop"])),
                 class: "i-small",
                 fill: "rgb(var(--white))"
               })
@@ -95,15 +96,16 @@ const _sfc_main = {
             _: 1
           })) : (openBlock(), createBlock(_sfc_main$1, {
             key: 2,
-            onClick: _cache[1] || (_cache[1] = withModifiers(($event) => pauseTrack(), ["stop"])),
-            class: "bg-transparent border-none pd-zero",
+            onClick: _cache[3] || (_cache[3] = withModifiers(($event) => pauseTrack(), ["stop"])),
+            class: "bg-main pd-thin",
             showLoader: false,
             showSucces: false
           }, {
             default: withCtx(() => [
               createVNode(_sfc_main$3, {
+                onClick: _cache[2] || (_cache[2] = withModifiers(($event) => pauseTrack(), ["stop"])),
                 class: "i-small",
-                fill: "rgb(var(--main))"
+                fill: "rgb(var(--white))"
               })
             ]),
             _: 1
@@ -112,20 +114,35 @@ const _sfc_main = {
         createElementVNode("div", _hoisted_3, [
           __props.showCover ? (openBlock(), createElementBlock("div", _hoisted_4, [
             createVNode(Media, {
-              url: __props.track.coverUrl || __props.track.album && __props.track.album.coverUrl || "/assets/placeholder-track.jpg",
+              url: __props.track.coverUrl || __props.track.album && __props.track.album.coverUrl || "/logo/logo-placeholder.jpg",
               class: "w-3r h-3r object-fit-cover o-hidden radius-small"
             }, null, 8, ["url"])
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_5, [
             createElementVNode("div", {
               class: normalizeClass(["track-name", { "t-main": isPlaying(__props.track) }])
-            }, toDisplayString(__props.track.title), 3),
-            createElementVNode("div", _hoisted_6, [
+            }, [
+              __props.track.url ? (openBlock(), createBlock(_component_router_link, {
+                key: 0,
+                to: { name: "track", params: { url: __props.track.url } },
+                class: normalizeClass(["hover-t-main", { "t-main": isPlaying(__props.track) }]),
+                onClick: _cache[4] || (_cache[4] = withModifiers(() => {
+                }, ["stop"]))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.track.title), 1)
+                ]),
+                _: 1
+              }, 8, ["to", "class"])) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.track.title), 1))
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass([{ "t-main": isPlaying(__props.track) }, "track-artist t-transp t-small"])
+            }, [
               __props.track.artist && __props.track.artist._id ? (openBlock(), createBlock(_component_router_link, {
                 key: 0,
                 to: { name: "artist", params: { url: __props.track.artist.url } },
-                class: "t-grey hover-",
-                onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                class: "t-transp hover-",
+                onClick: _cache[5] || (_cache[5] = withModifiers(() => {
                 }, ["stop"]))
               }, {
                 default: withCtx(() => [
@@ -133,15 +150,15 @@ const _sfc_main = {
                 ]),
                 _: 1
               }, 8, ["to"])) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(getArtistName(__props.track)), 1))
-            ])
+            ], 2)
           ])
         ]),
         __props.showAlbum ? (openBlock(), createElementBlock("div", _hoisted_8, [
           __props.track.album && __props.track.album._id ? (openBlock(), createBlock(_component_router_link, {
             key: 0,
             to: { name: "album", params: { url: __props.track.album.url } },
-            class: "t-grey hover-",
-            onClick: _cache[3] || (_cache[3] = withModifiers(() => {
+            class: "t-transp hover-",
+            onClick: _cache[6] || (_cache[6] = withModifiers(() => {
             }, ["stop"]))
           }, {
             default: withCtx(() => [

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

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

package/dist/martyrs/src/modules/music/components/forms/AlbumForm.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Field = require("../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
 const Block = require("../../../../components/Block/Block.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Select = require("../../../../components/Select/Select.vue2.cjs");

package/dist/martyrs/src/modules/music/components/forms/AlbumForm.vue.js

@@ -1,6 +1,6 @@
 import { reactive, ref, watch, onMounted, createElementBlock, openBlock, createElementVNode, toDisplayString, withModifiers, createVNode, withCtx, createCommentVNode, createTextVNode } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import Field from "../../../../components/Field/Field.vue2.js";
+import Field from "../../../../components/Field/Field.vue.js";
 import _sfc_main$2 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$4 from "../../../../components/Button/Button.vue.js";
 import Select from "../../../../components/Select/Select.vue2.js";

package/dist/martyrs/src/modules/music/components/forms/ArtistForm.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Field = require("../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
 const Block = require("../../../../components/Block/Block.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");

package/dist/martyrs/src/modules/music/components/forms/ArtistForm.vue.js

@@ -1,6 +1,6 @@
 import { reactive, ref, watch, onMounted, createElementBlock, openBlock, createElementVNode, toDisplayString, withModifiers, createVNode, withCtx, createCommentVNode, createTextVNode } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import Field from "../../../../components/Field/Field.vue2.js";
+import Field from "../../../../components/Field/Field.vue.js";
 import _sfc_main$2 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$5 from "../../../../components/Button/Button.vue.js";
 import _sfc_main$4 from "../../../../components/Checkbox/Checkbox.vue.js";