npm - @ozdao/martyrs - Versions diffs - 0.2.495 → 0.2.496 - Mend

@ozdao/martyrs 0.2.495 → 0.2.496

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/dist/martyrs/src/modules/music/components/pages/Track.vue.cjs CHANGED Viewed

@@ -5,10 +5,11 @@ const vueRouter = require("vue-router");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
 const Media = require("../../../../components/Media/Media.vue.cjs");
-const Dropdown = require("../../../../components/Dropdown/Dropdown.vue.cjs");
+const Dropdown = require("../../../../components/Dropdown/Dropdown.vue2.cjs");
 const Popup = require("../../../../components/Popup/Popup.vue.cjs");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const IconPlay = require("../../../icons/navigation/IconPlay.vue.cjs");
+const IconPause = require("../../../icons/navigation/IconPause.vue.cjs");
 const IconLike = require("../../../icons/navigation/IconLike.vue.cjs");
 const IconEllipsis = require("../../../icons/navigation/IconEllipsis.vue.cjs");
 const IconAdd = require("../../../icons/navigation/IconAdd.vue.cjs");
@@ -17,6 +18,7 @@ const IconCalendar = require("../../../icons/entities/IconCalendar.vue.cjs");
 const IconCheckmark = require("../../../icons/navigation/IconCheckmark.vue.cjs");
 const IconShow = require("../../../icons/actions/IconShow.vue.cjs");
 const TrackListCard = require("../cards/TrackListCard.vue.cjs");
+const ArtistCardSmall = require("../cards/ArtistCardSmall.vue.cjs");
 const tracks = require("../../store/tracks.cjs");
 const player = require("../../store/player.cjs");
 const auth = require("../../../auth/views/store/auth.cjs");
@@ -34,71 +36,66 @@ const _hoisted_4 = {
   class: "track-content cols-2-fit-content mobile:cols-1 gap-big"
 };
 const _hoisted_5 = { class: "pos-sticky pos-t-0 mobile:pos-relative track-cover-section" };
-const _hoisted_6 = { class: "cover-container relative mn-b-medium radius-big overflow-hidden shadow-big" };
-const _hoisted_7 = { class: "stats-grid grid cols-2 gap-small" };
-const _hoisted_8 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
-const _hoisted_9 = { class: "mn-b-thin" };
-const _hoisted_10 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
-const _hoisted_11 = { class: "mn-b-thin" };
-const _hoisted_12 = { class: "track-details-section" };
-const _hoisted_13 = { class: "flex items-center gap-small mn-b-small" };
-const _hoisted_14 = {
+const _hoisted_6 = { class: "cover-container pos-relative mn-b-medium radius-big o-hidden" };
+const _hoisted_7 = { class: "cover-overlay w-100 h-100 pos-absolute pos-t-0 pos-r-0 bg-black-transp-40 flex flex-center" };
+const _hoisted_8 = { class: "stats-grid grid cols-2 gap-small" };
+const _hoisted_9 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
+const _hoisted_10 = { class: "mn-b-thin" };
+const _hoisted_11 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
+const _hoisted_12 = { class: "mn-b-thin" };
+const _hoisted_13 = { class: "track-details-section" };
+const _hoisted_14 = { class: "h1 mn-b-medium" };
+const _hoisted_15 = { class: "flex gap-small mn-b-medium" };
+const _hoisted_16 = { class: "dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin" };
+const _hoisted_17 = { class: "artists-section mn-b-medium" };
+const _hoisted_18 = {
   key: 0,
-  class: "badge bg-danger-transp-20 t-danger pd-thin-big radius-small t-small"
+  class: "t-medium mn-b-small"
 };
-const _hoisted_15 = { class: "h1 mn-b-medium" };
-const _hoisted_16 = { class: "flex gap-small mn-b-medium" };
-const _hoisted_17 = { class: "dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin" };
-const _hoisted_18 = { class: "artist-card bg-light pd-medium radius-medium flex items-center gap-medium mn-b-big" };
-const _hoisted_19 = { class: "artist-avatar" };
-const _hoisted_20 = {
-  key: 1,
-  class: "w-4r h-4r radius-full bg-primary flex-center"
-};
-const _hoisted_21 = { class: "flex items-center gap-thin" };
-const _hoisted_22 = { class: "t-large" };
-const _hoisted_23 = { class: "metadata-grid grid cols-2 gap-small mn-b-big" };
-const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_25 = { class: "icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center" };
+const _hoisted_19 = { class: "flex flex-col gap-small" };
+const _hoisted_20 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_21 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_22 = { class: "t-medium" };
+const _hoisted_23 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_24 = { class: "t-medium" };
+const _hoisted_25 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
 const _hoisted_26 = { class: "t-medium" };
 const _hoisted_27 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_28 = { class: "icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center" };
-const _hoisted_29 = { class: "t-medium" };
-const _hoisted_30 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_31 = { class: "icon-wrapper bg-success-transp-20 w-3r h-3r radius-small flex-center" };
-const _hoisted_32 = { class: "t-medium t-success" };
-const _hoisted_33 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_34 = { class: "icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center" };
-const _hoisted_35 = { class: "t-medium" };
-const _hoisted_36 = {
+const _hoisted_28 = { class: "t-medium" };
+const _hoisted_29 = {
   key: 0,
-  class: "album-card bg-light pd-medium radius-medium mn-b-medium"
+  class: "t-medium mn-b-small"
 };
-const _hoisted_37 = { class: "t-medium" };
-const _hoisted_38 = {
+const _hoisted_30 = {
   key: 1,
-  class: "tags-section mn-b-medium"
+  class: "album-card bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_39 = { class: "flex gap-thin flex-wrap" };
-const _hoisted_40 = {
+const _hoisted_31 = { class: "t-medium" };
+const _hoisted_32 = {
   key: 2,
-  class: "description-section bg-light pd-medium radius-medium mn-b-medium"
+  class: "tags-section mn-b-medium"
 };
-const _hoisted_41 = { class: "t-transp" };
-const _hoisted_42 = {
+const _hoisted_33 = { class: "flex gap-thin flex-wrap" };
+const _hoisted_34 = {
   key: 3,
+  class: "description-section bg-light pd-medium radius-medium mn-b-medium"
+};
+const _hoisted_35 = { class: "t-transp" };
+const _hoisted_36 = {
+  key: 4,
   class: "lyrics-section bg-light pd-medium radius-medium"
 };
-const _hoisted_43 = { class: "t-transp t-small" };
-const _hoisted_44 = {
+const _hoisted_37 = { class: "t-transp t-small" };
+const _hoisted_38 = {
   key: 3,
   class: "related-section mn-t-big"
 };
-const _hoisted_45 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_39 = { class: "bg-light radius-medium o-hidden" };
 const _sfc_main = {
   __name: "Track",
   emits: ["page-loading", "page-loaded"],
   setup(__props, { emit: __emit }) {
+    const isPlaying = vue.computed(() => player.state.isPlaying);
     const route = vueRouter.useRoute();
     const router = vueRouter.useRouter();
     const emits = __emit;
@@ -205,26 +202,47 @@ const _sfc_main = {
                 url: track.value.coverUrl || track.value.album && track.value.album.coverUrl || "/logo/logo-placeholder.jpg",
                 alt: track.value.title,
                 class: "aspect-1x1 w-100 radius-medium o-hidden"
-              }, null, 8, ["url", "alt"])
+              }, null, 8, ["url", "alt"]),
+              vue.createElementVNode("div", _hoisted_7, [
+                vue.createVNode(Button.default, {
+                  onClick: playTrack,
+                  color: "white",
+                  size: "big",
+                  class: "w-5r h-5r radius-big bg-main shadow-big hover-scale-110"
+                }, {
+                  default: vue.withCtx(() => [
+                    !isPlaying.value ? (vue.openBlock(), vue.createBlock(IconPlay.default, {
+                      key: 0,
+                      fill: "rgb(var(--white))",
+                      class: "i-medium"
+                    })) : (vue.openBlock(), vue.createBlock(IconPause.default, {
+                      key: 1,
+                      fill: "rgb(var(--white))",
+                      class: "i-medium"
+                    }))
+                  ]),
+                  _: 1
+                })
+              ])
             ]),
-            vue.createElementVNode("div", _hoisted_7, [
-              vue.createElementVNode("div", _hoisted_8, [
-                vue.createElementVNode("div", _hoisted_9, vue.toDisplayString(formatNumber(track.value.playCount)), 1),
+            vue.createElementVNode("div", _hoisted_8, [
+              vue.createElementVNode("div", _hoisted_9, [
+                vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(formatNumber(track.value.playCount)), 1),
                 _cache[4] || (_cache[4] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Plays", -1))
               ]),
-              vue.createElementVNode("div", _hoisted_10, [
-                vue.createElementVNode("div", _hoisted_11, vue.toDisplayString(formatNumber(track.value.views)), 1),
+              vue.createElementVNode("div", _hoisted_11, [
+                vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(formatNumber(track.value.views)), 1),
                 _cache[5] || (_cache[5] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Views", -1))
               ])
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_12, [
-            vue.createElementVNode("div", _hoisted_13, [
-              _cache[6] || (_cache[6] = vue.createElementVNode("span", { class: "badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase" }, "Single", -1)),
-              track.value.isExplicit ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, "Explicit")) : vue.createCommentVNode("", true)
-            ]),
-            vue.createElementVNode("h1", _hoisted_15, vue.toDisplayString(track.value.title), 1),
-            vue.createElementVNode("div", _hoisted_16, [
+          vue.createElementVNode("div", _hoisted_13, [
+            _cache[19] || (_cache[19] = vue.createElementVNode("div", { class: "flex items-center gap-small mn-b-small" }, [
+              vue.createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, "Single"),
+              vue.createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, "Explicit")
+            ], -1)),
+            vue.createElementVNode("h1", _hoisted_14, vue.toDisplayString(track.value.title), 1),
+            vue.createElementVNode("div", _hoisted_15, [
               vue.createVNode(Button.default, {
                 onClick: playTrack,
                 color: "primary",
@@ -232,11 +250,16 @@ const _sfc_main = {
                 class: "flex-1 t-white bg-black radius-thin flex-center gap-thin"
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(IconPlay.default, {
+                  !isPlaying.value ? (vue.openBlock(), vue.createBlock(IconPlay.default, {
+                    key: 0,
                     fill: "rgb(var(--white))",
                     class: "i-medium"
-                  }),
-                  _cache[7] || (_cache[7] = vue.createTextVNode(" Play "))
+                  })) : (vue.openBlock(), vue.createBlock(IconPause.default, {
+                    key: 1,
+                    fill: "rgb(var(--white))",
+                    class: "i-medium"
+                  })),
+                  vue.createTextVNode(" " + vue.toDisplayString(!isPlaying.value ? "Play" : "Pause"), 1)
                 ]),
                 _: 1
               }),
@@ -248,7 +271,7 @@ const _sfc_main = {
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(IconAdd.default, { class: "i-medium" }),
-                  _cache[8] || (_cache[8] = vue.createTextVNode(" Add to Queue "))
+                  _cache[6] || (_cache[6] = vue.createTextVNode(" Add to Queue "))
                 ]),
                 _: 1
               }),
@@ -261,7 +284,7 @@ const _sfc_main = {
                 default: vue.withCtx(() => [
                   vue.createVNode(IconLike.default, {
                     class: "i-medium",
-                    fill: isFavorite.value
+                    fill: isFavorite.value ? "rgb(var(--main)" : "rgb(var(--black)"
                   }, null, 8, ["fill"]),
                   vue.createTextVNode(" " + vue.toDisplayString(isFavorite.value ? "Liked" : "Like"), 1)
                 ]),
@@ -286,14 +309,14 @@ const _sfc_main = {
                   })
                 ]),
                 default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_17, [
+                  vue.createElementVNode("div", _hoisted_16, [
                     vue.createVNode(Button.default, {
                       onClick: _cache[0] || (_cache[0] = ($event) => showAddToPlaylistModal.value = true),
                       color: "transp",
                       size: "small",
                       class: "w-100 justify-start"
                     }, {
-                      default: vue.withCtx(() => _cache[9] || (_cache[9] = [
+                      default: vue.withCtx(() => _cache[7] || (_cache[7] = [
                         vue.createTextVNode(" Add to Playlist ")
                       ])),
                       _: 1
@@ -304,20 +327,20 @@ const _sfc_main = {
                       size: "small",
                       class: "w-100 justify-start"
                     }, {
-                      default: vue.withCtx(() => _cache[10] || (_cache[10] = [
+                      default: vue.withCtx(() => _cache[8] || (_cache[8] = [
                         vue.createTextVNode(" Copy Link ")
                       ])),
                       _: 1
                     }),
                     isOwner.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                      _cache[13] || (_cache[13] = vue.createElementVNode("hr", { class: "mn-v-thin border-dark-transp-10" }, null, -1)),
+                      _cache[11] || (_cache[11] = vue.createElementVNode("hr", { class: "mn-v-thin border-dark-transp-10" }, null, -1)),
                       vue.createVNode(Button.default, {
                         onClick: editTrack,
                         color: "transp",
                         size: "small",
                         class: "w-100 justify-start"
                       }, {
-                        default: vue.withCtx(() => _cache[11] || (_cache[11] = [
+                        default: vue.withCtx(() => _cache[9] || (_cache[9] = [
                           vue.createTextVNode(" Edit Track ")
                         ])),
                         _: 1
@@ -328,7 +351,7 @@ const _sfc_main = {
                         size: "small",
                         class: "w-100 justify-start"
                       }, {
-                        default: vue.withCtx(() => _cache[12] || (_cache[12] = [
+                        default: vue.withCtx(() => _cache[10] || (_cache[10] = [
                           vue.createTextVNode(" Delete Track ")
                         ])),
                         _: 1
@@ -339,130 +362,95 @@ const _sfc_main = {
                 _: 1
               }, 8, ["label", "modelValue"])
             ]),
-            vue.createElementVNode("div", _hoisted_18, [
-              vue.createVNode(_component_router_link, {
-                to: { name: "artist", params: { url: track.value.artist.url } },
-                class: "flex items-center gap-medium flex-1 hover-opacity"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_19, [
-                    track.value.artist.photoUrl ? (vue.openBlock(), vue.createBlock(Media.default, {
-                      key: 0,
-                      src: track.value.artist.photoUrl,
-                      alt: track.value.artist.name,
-                      class: "w-4r h-4r radius-full object-cover"
-                    }, null, 8, ["src", "alt"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, vue.toDisplayString(track.value.artist.name.charAt(0)), 1))
-                  ]),
-                  vue.createElementVNode("div", null, [
-                    vue.createElementVNode("div", _hoisted_21, [
-                      vue.createElementVNode("span", _hoisted_22, vue.toDisplayString(track.value.artist.name), 1),
-                      track.value.artist.isVerified ? (vue.openBlock(), vue.createBlock(IconCheckmark.default, {
-                        key: 0,
-                        class: "w-1r h-1r t-primary"
-                      })) : vue.createCommentVNode("", true)
-                    ]),
-                    _cache[14] || (_cache[14] = vue.createElementVNode("span", { class: "t-small t-transp" }, "Artist", -1))
-                  ])
-                ]),
-                _: 1
-              }, 8, ["to"]),
-              !isOwner.value ? (vue.openBlock(), vue.createBlock(Button.default, {
-                key: 0,
-                onClick: toggleFollowArtist,
-                color: isFollowingArtist.value ? "primary" : "transp",
-                size: "small"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(isFollowingArtist.value ? "Following" : "Follow"), 1)
-                ]),
-                _: 1
-              }, 8, ["color"])) : vue.createCommentVNode("", true)
+            vue.createElementVNode("div", _hoisted_17, [
+              track.value.artist ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_18, "Artist")) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_19, [
+                (vue.openBlock(), vue.createBlock(ArtistCardSmall.default, {
+                  key: track.value.artist._id,
+                  artist: track.value.artist,
+                  "is-following": isFollowingArtist.value,
+                  "show-follow-button": !isOwner.value,
+                  onToggleFollow: toggleFollowArtist
+                }, null, 8, ["artist", "is-following", "show-follow-button"]))
+              ])
             ]),
-            vue.createElementVNode("div", _hoisted_23, [
-              vue.createElementVNode("div", _hoisted_24, [
-                vue.createElementVNode("div", _hoisted_25, [
-                  vue.createVNode(IconTime.default, { class: "i-regular t-primary" })
-                ]),
+            _cache[20] || (_cache[20] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
+            vue.createElementVNode("div", _hoisted_20, [
+              vue.createElementVNode("div", _hoisted_21, [
+                vue.createVNode(IconCalendar.default, { class: "i-regular t-primary" }),
                 vue.createElementVNode("div", null, [
-                  _cache[15] || (_cache[15] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
-                  vue.createElementVNode("div", _hoisted_26, vue.toDisplayString(formatDuration(track.value.duration)), 1)
+                  _cache[12] || (_cache[12] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
+                  vue.createElementVNode("div", _hoisted_22, vue.toDisplayString(formatDate(track.value.releaseDate)), 1)
                 ])
               ]),
-              vue.createElementVNode("div", _hoisted_27, [
-                vue.createElementVNode("div", _hoisted_28, [
-                  vue.createVNode(IconCalendar.default, { class: "i-regular t-primary" })
-                ]),
+              vue.createElementVNode("div", _hoisted_23, [
+                vue.createVNode(IconTime.default, { class: "i-regular t-primary" }),
                 vue.createElementVNode("div", null, [
-                  _cache[16] || (_cache[16] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
-                  vue.createElementVNode("div", _hoisted_29, vue.toDisplayString(formatDate(track.value.releaseDate)), 1)
+                  _cache[13] || (_cache[13] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
+                  vue.createElementVNode("div", _hoisted_24, vue.toDisplayString(formatDuration(track.value.duration)), 1)
                 ])
               ]),
-              vue.createElementVNode("div", _hoisted_30, [
-                vue.createElementVNode("div", _hoisted_31, [
-                  vue.createVNode(IconCheckmark.default, { class: "i-regular t-success" })
-                ]),
+              vue.createElementVNode("div", _hoisted_25, [
+                vue.createVNode(IconCheckmark.default, { class: "i-regular t-primary" }),
                 vue.createElementVNode("div", null, [
-                  _cache[17] || (_cache[17] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Status", -1)),
-                  vue.createElementVNode("div", _hoisted_32, vue.toDisplayString(track.value.status), 1)
+                  _cache[14] || (_cache[14] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Status", -1)),
+                  vue.createElementVNode("div", _hoisted_26, vue.toDisplayString(track.value.status), 1)
                 ])
               ]),
-              vue.createElementVNode("div", _hoisted_33, [
-                vue.createElementVNode("div", _hoisted_34, [
-                  vue.createVNode(IconShow.default, { class: "i-regular t-primary" })
-                ]),
+              vue.createElementVNode("div", _hoisted_27, [
+                vue.createVNode(IconShow.default, { class: "i-regular t-primary" }),
                 vue.createElementVNode("div", null, [
-                  _cache[18] || (_cache[18] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
-                  vue.createElementVNode("div", _hoisted_35, vue.toDisplayString(track.value.isPublic ? "Public" : "Private"), 1)
+                  _cache[15] || (_cache[15] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
+                  vue.createElementVNode("div", _hoisted_28, vue.toDisplayString(track.value.isPublic ? "Public" : "Private"), 1)
                 ])
               ])
             ]),
-            track.value.album ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_36, [
-              _cache[19] || (_cache[19] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase mn-b-thin" }, "From Album", -1)),
+            track.value.album ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_29, "From Album")) : vue.createCommentVNode("", true),
+            track.value.album ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_30, [
               vue.createVNode(_component_router_link, {
                 to: `/album/${track.value.album.url}`,
-                class: "flex items-center gap-medium hover-opacity"
+                class: "flex flex-v-center gap-thin hover-opacity"
               }, {
                 default: vue.withCtx(() => [
-                  track.value.album.coverUrl ? (vue.openBlock(), vue.createBlock(Media.default, {
-                    key: 0,
-                    src: track.value.album.coverUrl,
+                  vue.createVNode(Media.default, {
+                    url: track.value.album.coverArt || "/logo/logo-placeholder.jpg",
                     alt: track.value.album.title,
-                    class: "w-3r h-3r radius-small object-cover"
-                  }, null, 8, ["src", "alt"])) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("span", _hoisted_37, vue.toDisplayString(track.value.album.title), 1)
+                    class: "w-3r h-3r radius-thin o-hidden object-cover"
+                  }, null, 8, ["url", "alt"]),
+                  vue.createElementVNode("span", _hoisted_31, vue.toDisplayString(track.value.album.title), 1)
                 ]),
                 _: 1
               }, 8, ["to"])
             ])) : vue.createCommentVNode("", true),
-            track.value.genre && track.value.genre.length || track.value.tags && track.value.tags.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_38, [
-              _cache[20] || (_cache[20] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
-              vue.createElementVNode("div", _hoisted_39, [
+            track.value.genre && track.value.genre.length || track.value.tags && track.value.tags.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_32, [
+              _cache[16] || (_cache[16] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
+              vue.createElementVNode("div", _hoisted_33, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(track.value.genre, (genre) => {
                   return vue.openBlock(), vue.createElementBlock("span", {
                     key: genre,
-                    class: "tag bg-primary-transp-20 t-primary pd-thin-big radius-small t-small hover-bg-primary-transp-30 cursor-pointer"
-                  }, vue.toDisplayString(genre), 1);
+                    class: "tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer"
+                  }, vue.toDisplayString(genre.name || genre), 1);
                 }), 128)),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(track.value.tags, (tag) => {
                   return vue.openBlock(), vue.createElementBlock("span", {
                     key: tag,
                     class: "tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
-                  }, " #" + vue.toDisplayString(tag), 1);
+                  }, " #" + vue.toDisplayString(tag.name || tag), 1);
                 }), 128))
               ])
             ])) : vue.createCommentVNode("", true),
-            track.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [
-              _cache[21] || (_cache[21] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
-              vue.createElementVNode("p", _hoisted_41, vue.toDisplayString(track.value.description), 1)
+            track.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_34, [
+              _cache[17] || (_cache[17] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
+              vue.createElementVNode("p", _hoisted_35, vue.toDisplayString(track.value.description), 1)
             ])) : vue.createCommentVNode("", true),
-            track.value.lyrics ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_42, [
-              _cache[22] || (_cache[22] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Lyrics", -1)),
-              vue.createElementVNode("pre", _hoisted_43, vue.toDisplayString(track.value.lyrics), 1)
+            track.value.lyrics ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_36, [
+              _cache[18] || (_cache[18] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Lyrics", -1)),
+              vue.createElementVNode("pre", _hoisted_37, vue.toDisplayString(track.value.lyrics), 1)
             ])) : vue.createCommentVNode("", true)
           ])
         ])) : vue.createCommentVNode("", true),
-        track.value && relatedTracks.value && relatedTracks.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_44, [
-          _cache[23] || (_cache[23] = vue.createElementVNode("h2", { class: "h2 mn-b-medium" }, "Related Tracks", -1)),
+        track.value && relatedTracks.value && relatedTracks.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_38, [
+          _cache[21] || (_cache[21] = vue.createElementVNode("h2", { class: "h2 mn-b-medium" }, "Related Tracks", -1)),
           vue.createVNode(Feed.default, {
             store: {
               read: () => new _ctx.Promise((resolve) => resolve(relatedTracks.value || [])),
@@ -480,7 +468,7 @@ const _sfc_main = {
             class: "grid cols-2 cols-m-3 cols-l-4 gap-medium"
           }, {
             default: vue.withCtx(({ items }) => [
-              vue.createElementVNode("div", _hoisted_45, [
+              vue.createElementVNode("div", _hoisted_39, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (relatedTrack, index) => {
                   return vue.openBlock(), vue.createBlock(TrackListCard.default, {
                     key: relatedTrack._id,
@@ -500,7 +488,7 @@ const _sfc_main = {
           onClosePopup: _cache[2] || (_cache[2] = ($event) => showAddToPlaylistModal.value = false),
           class: "bg-white pd-medium w-m-25r radius-medium"
         }, {
-          default: vue.withCtx(() => _cache[24] || (_cache[24] = [
+          default: vue.withCtx(() => _cache[22] || (_cache[22] = [
             vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Add to Playlist", -1),
             vue.createElementVNode("p", { class: "t-transp" }, "Playlist selector coming soon...", -1)
           ])),

package/dist/martyrs/src/modules/music/components/pages/Track.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Track.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Track.vue"],"sourcesContent":["<!-- components/pages/Track.vue -->\n<template>\n <div class=\"track-page pd-small\">\n <!-- Loading -->\n <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n <Loader />\n </div>\n\n <!-- Not Found -->\n <div v-if=\"hasLoaded && !track\" class=\"t-center pd-big\">\n <h2 class=\"\">Track not found</h2>\n <p class=\"t-transp t-medium\">The track you're looking for doesn't exist or has been removed.</p>\n </div>\n\n <!-- Track Content -->\n <div v-if=\"track\" class=\"track-content cols-2-fit-content mobile:cols-1 gap-big\">\n <!-- Left Column - Cover & Stats -->\n <div class=\"pos-sticky pos-t-0 mobile:pos-relative track-cover-section\">\n <!-- Cover with Play Overlay -->\n <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n <Media \n :url=\"track.coverUrl \|\| (track.album && track.album.coverUrl) \|\| '/logo/logo-placeholder.jpg'\" \n :alt=\"track.title\"\n class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n />\n <!-- <div class=\"cover-overlay absolute inset-0 bg-black-transp-40 flex-center opacity-0 hover-opacity-100 transition\">\n <Button\n @click=\"playTrack\"\n color=\"white\"\n size=\"big\"\n class=\"w-5r h-5r radius-full shadow-big hover-scale-110\"\n >\n <IconPlay class=\"w-2r h-2r\" />\n </Button>\n </div> -->\n </div>\n\n \n\n <!-- Quick Stats -->\n <div class=\"stats-grid grid cols-2 gap-small\">\n <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n <div class=\" mn-b-thin\">{{ formatNumber(track.playCount) }}</div>\n <div class=\"t-small t-transp t-uppercase\">Plays</div>\n </div>\n <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n <div class=\" mn-b-thin\">{{ formatNumber(track.views) }}</div>\n <div class=\"t-small t-transp t-uppercase\">Views</div>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Track Details -->\n <div class=\"track-details-section\">\n <!-- Track Type Badge -->\n <div class=\"flex items-center gap-small mn-b-small\">\n <span class=\"badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase\">Single</span>\n <span v-if=\"track.isExplicit\" class=\"badge bg-danger-transp-20 t-danger pd-thin-big radius-small t-small\">Explicit</span>\n </div>\n\n <!-- Track Title -->\n <h1 class=\"h1 mn-b-medium\">{{ track.title }}</h1>\n <!-- Action Buttons -->\n <div class=\"flex gap-small mn-b-medium\">\n <Button\n @click=\"playTrack\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 t-white bg-black radius-thin flex-center gap-thin\"\n >\n <IconPlay fill=\"rgb(var(--white))\" class=\"i-medium\" />\n Play\n </Button>\n\n <Button\n @click=\"addToQueue\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconAdd class=\"i-medium\" />\n Add to Queue\n </Button>\n\n <Button\n @click=\"toggleFavorite\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconLike class=\"i-medium\" :fill=\"isFavorite\" />\n {{isFavorite ? 'Liked' : 'Like'}}\n </Button>\n\n <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" v-model=\"showDropdown\" class=\"relative\">\n <template #trigger>\n <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n <IconEllipsis class=\"w-1-25r h-1-25r\" />\n </Button>\n </template>\n <template #default>\n <div class=\"dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin\">\n <Button @click=\"showAddToPlaylistModal = true\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Add to Playlist\n </Button>\n <Button @click=\"copyLink\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Copy Link\n </Button>\n <template v-if=\"isOwner\">\n <hr class=\"mn-v-thin border-dark-transp-10\" />\n <Button @click=\"editTrack\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Edit Track\n </Button>\n <Button @click=\"deleteTrack\" color=\"danger\" size=\"small\" class=\"w-100 justify-start\">\n Delete Track\n </Button>\n </template>\n </div>\n </template>\n </Dropdown>\n </div>\n\n <!-- Artist Card -->\n <div class=\"artist-card bg-light pd-medium radius-medium flex items-center gap-medium mn-b-big\">\n <router-link \n :to=\"{ name: 'artist', params: { url: track.artist.url } }\"\n class=\"flex items-center gap-medium flex-1 hover-opacity\"\n >\n <div class=\"artist-avatar\">\n <Media \n v-if=\"track.artist.photoUrl\"\n :src=\"track.artist.photoUrl\"\n :alt=\"track.artist.name\"\n class=\"w-4r h-4r radius-full object-cover\"\n />\n <div v-else class=\"w-4r h-4r radius-full bg-primary flex-center \">\n {{ track.artist.name.charAt(0) }}\n </div>\n </div>\n <div>\n <div class=\"flex items-center gap-thin\">\n <span class=\"t-large \">{{ track.artist.name }}</span>\n <IconVerified v-if=\"track.artist.isVerified\" class=\"w-1r h-1r t-primary\" />\n </div>\n <span class=\"t-small t-transp\">Artist</span>\n </div>\n </router-link>\n <Button \n v-if=\"!isOwner\"\n @click=\"toggleFollowArtist\"\n :color=\"isFollowingArtist ? 'primary' : 'transp'\"\n size=\"small\"\n >\n {{ isFollowingArtist ? 'Following' : 'Follow' }}\n </Button>\n </div>\n\n\n\n <!-- Metadata Cards -->\n <div class=\"metadata-grid grid cols-2 gap-small mn-b-big\">\n <!-- Duration -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <div class=\"icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center\">\n <IconClock class=\"i-regular t-primary\" />\n </div>\n <div>\n <div class=\"t-small t-transp t-uppercase\">Duration</div>\n <div class=\"t-medium \">{{ formatDuration(track.duration) }}</div>\n </div>\n </div>\n\n <!-- Release Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <div class=\"icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center\">\n <IconCalendar class=\"i-regular t-primary\" />\n </div>\n <div>\n <div class=\"t-small t-transp t-uppercase\">Released</div>\n <div class=\"t-medium \">{{ formatDate(track.releaseDate) }}</div>\n </div>\n </div>\n\n <!-- Status -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <div class=\"icon-wrapper bg-success-transp-20 w-3r h-3r radius-small flex-center\">\n <IconCheck class=\"i-regular t-success\" />\n </div>\n <div>\n <div class=\"t-small t-transp t-uppercase\">Status</div>\n <div class=\"t-medium t-success\">{{ track.status }}</div>\n </div>\n </div>\n\n <!-- Visibility -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <div class=\"icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center\">\n <IconEye class=\"i-regular t-primary\" />\n </div>\n <div>\n <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n <div class=\"t-medium \">{{ track.isPublic ? 'Public' : 'Private' }}</div>\n </div>\n </div>\n </div>\n\n <!-- Album Info -->\n <div v-if=\"track.album\" class=\"album-card bg-light pd-medium radius-medium mn-b-medium\">\n <div class=\"t-small t-transp t-uppercase mn-b-thin\">From Album</div>\n <router-link \n :to=\"`/album/${track.album.url}`\"\n class=\"flex items-center gap-medium hover-opacity\"\n >\n <Media \n v-if=\"track.album.coverUrl\"\n :src=\"track.album.coverUrl\"\n :alt=\"track.album.title\"\n class=\"w-3r h-3r radius-small object-cover\"\n />\n <span class=\"t-medium \">{{ track.album.title }}</span>\n </router-link>\n </div>\n\n <!-- Genres & Tags -->\n <div v-if=\"(track.genre && track.genre.length) \|\| (track.tags && track.tags.length)\" class=\"tags-section mn-b-medium\">\n <h3 class=\"t-medium mn-b-small\">Genres & Tags</h3>\n <div class=\"flex gap-thin flex-wrap\">\n <span \n v-for=\"genre in track.genre\" \n :key=\"genre\"\n class=\"tag bg-primary-transp-20 t-primary pd-thin-big radius-small t-small hover-bg-primary-transp-30 cursor-pointer\"\n >\n {{ genre }}\n </span>\n <span \n v-for=\"tag in track.tags\" \n :key=\"tag\"\n class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n >\n #{{ tag }}\n </span>\n </div>\n </div>\n\n <!-- Description -->\n <div v-if=\"track.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n <h3 class=\"t-medium mn-b-small\">About</h3>\n <p class=\"t-transp\">{{ track.description }}</p>\n </div>\n\n <!-- Lyrics -->\n <div v-if=\"track.lyrics\" class=\"lyrics-section bg-light pd-medium radius-medium\">\n <h3 class=\"t-medium mn-b-small\">Lyrics</h3>\n <pre class=\"t-transp t-small\">{{ track.lyrics }}</pre>\n </div>\n </div>\n </div>\n\n <!-- Related Tracks -->\n <section v-if=\"track && relatedTracks && relatedTracks.length\" class=\"related-section mn-t-big\">\n <h2 class=\"h2 mn-b-medium\">Related Tracks</h2>\n <Feed\n :store=\"{\n read: () => new Promise(resolve => resolve(relatedTracks \|\| [])),\n state: { isLoading: false }\n }\"\n :external=\"true\"\n :items=\"relatedTracks\"\n :states=\"{\n empty: {\n title: 'No related tracks',\n description: 'Check back later for recommendations',\n class: 'pd-medium bg-light radius-medium'\n }\n }\"\n class=\"grid cols-2 cols-m-3 cols-l-4 gap-medium\"\n >\n <template #default=\"{ items }\">\n <div class=\"bg-light radius-medium o-hidden\">\n <TrackListCard\n v-for=\"(relatedTrack, index) in items\"\n :key=\"relatedTrack._id\"\n :track=\"relatedTrack\"\n :index=\"index\"\n :showAlbum=\"true\"\n :showCover=\"true\"\n />\n </div>\n </template>\n </Feed>\n </section>\n\n <!-- Add to Playlist Modal -->\n <Popup \n v-if=\"showAddToPlaylistModal\" \n @close-popup=\"showAddToPlaylistModal = false\" \n class=\"bg-white pd-medium w-m-25r radius-medium\"\n >\n <h3 class=\"h3 mn-b-medium\">Add to Playlist</h3>\n <!-- <PlaylistSelector \n :trackId=\"track._id\" \n @added=\"showAddToPlaylistModal = false\"\n /> -->\n <p class=\"t-transp\">Playlist selector coming soon...</p>\n </Popup>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\n// Icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconCheck from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport TrackListCard from '../cards/TrackListCard.vue';\n// import PlaylistSelector from '../forms/PlaylistSelector.vue';\n\n// Store\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst showDropdown = ref(false);\nconst showAddToPlaylistModal = ref(false);\nconst isFavorite = ref(false);\nconst isFollowingArtist = ref(false);\n\n// Clear state\ntracksState.currentTrack = null;\ntracksState.relatedTracks = [];\n\n// Computed\nconst track = computed(() => tracksState.currentTrack);\nconst relatedTracks = computed(() => tracksState.relatedTracks \|\| []);\n\nconst isOwner = computed(() => {\n return track.value?.owner?.target === authState.user?._id;\n});\n\n// Format helpers\nconst formatDuration = (seconds) => {\n if (!seconds) return '0:00';\n const h = Math.floor(seconds / 3600);\n const m = Math.floor((seconds % 3600) / 60);\n const s = Math.floor(seconds % 60);\n \n if (h > 0) {\n return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n }\n return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatDate = (dateString) => {\n if (!dateString) return 'Unknown';\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n};\n\nconst formatNumber = (num) => {\n if (!num) return '0';\n if (num >= 1000000) {\n return (num / 1000000).toFixed(1) + 'M';\n } else if (num >= 1000) {\n return (num / 1000).toFixed(1) + 'K';\n }\n return num.toString();\n};\n\n// Actions\nconst playTrack = () => {\n if (track.value) {\n playerActions.setQueue([track.value]);\n }\n};\n\nconst toggleFavorite = () => {\n isFavorite.value = !isFavorite.value;\n // TODO: Implement actual saving\n};\n\nconst toggleFollowArtist = () => {\n isFollowingArtist.value = !isFollowingArtist.value;\n // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n if (track.value) {\n playerActions.addToQueue(track.value);\n }\n};\n\nconst editTrack = () => {\n router.push({ name: 'track-edit', params: { url: track.value.url } });\n};\n\nconst deleteTrack = async () => {\n if (confirm('Are you sure you want to delete this track?')) {\n try {\n await tracksActions.deleteTrack(track.value._id);\n router.push({ name: 'music-library' });\n } catch (error) {\n console.error('Failed to delete track:', error);\n }\n }\n};\n\nconst copyLink = () => {\n navigator.clipboard.writeText(window.location.href);\n showDropdown.value = false;\n};\n\n// Data fetching\nconst fetchTrackData = async () => {\n try {\n await tracksActions.fetchTrackByUrl(route.params.url);\n await tracksActions.fetchRelatedTracks(route.params.url);\n } catch (error) {\n console.error('Error loading track:', error);\n }\n};\n\n// Lifecycle\nonMounted(async () => {\n emits('page-loading');\n \n await fetchTrackData();\n \n hasLoaded.value = true;\n emits('page-loaded');\n});\n</script>\n\n<style scoped>\n</style>"],"names":["useRoute","useRouter","ref","tracksState","computed","authState","playerActions","tracksActions","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkVA,UAAM,QAAQA,UAAAA,SAAQ;AACtB,UAAM,SAASC,UAAAA,UAAS;AAGxB,UAAM,QAAQ;AAGd,UAAM,YAAYC,IAAAA,IAAI,KAAK;AAC3B,UAAM,eAAeA,IAAAA,IAAI,KAAK;AAC9B,UAAM,yBAAyBA,IAAAA,IAAI,KAAK;AACxC,UAAM,aAAaA,IAAAA,IAAI,KAAK;AAC5B,UAAM,oBAAoBA,IAAAA,IAAI,KAAK;AAGnCC,WAAAA,MAAY,eAAe;AAC3BA,WAAAA,MAAY,gBAAgB,CAAA;AAG5B,UAAM,QAAQC,IAAAA,SAAS,MAAMD,OAAAA,MAAY,YAAY;AACrD,UAAM,gBAAgBC,IAAAA,SAAS,MAAMD,aAAY,iBAAiB,CAAA,CAAE;AAEpE,UAAM,UAAUC,IAAAA,SAAS,MAAM;AAC7B,aAAO,MAAM,OAAO,OAAO,WAAWC,KAAAA,MAAU,MAAM;AAAA,IACxD,CAAC;AAGD,UAAM,iBAAiB,CAAC,YAAY;AAClC,UAAI,CAAC,QAAS,QAAO;AACrB,YAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AACnC,YAAM,IAAI,KAAK,MAAO,UAAU,OAAQ,EAAE;AAC1C,YAAM,IAAI,KAAK,MAAM,UAAU,EAAE;AAEjC,UAAI,IAAI,GAAG;AACT,eAAO,GAAG,CAAC,IAAI,EAAE,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC,IAAI,EAAE,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,MAC/E;AACA,aAAO,GAAG,CAAC,IAAI,EAAE,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IAC9C;AAEA,UAAM,aAAa,CAAC,eAAe;AACjC,UAAI,CAAC,WAAY,QAAO;AACxB,aAAO,IAAI,KAAK,UAAU,EAAE,mBAAmB,SAAS;AAAA,QACtD,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MACT,CAAG;AAAA,IACH;AAEA,UAAM,eAAe,CAAC,QAAQ;AAC5B,UAAI,CAAC,IAAK,QAAO;AACjB,UAAI,OAAO,KAAS;AAClB,gBAAQ,MAAM,KAAS,QAAQ,CAAC,IAAI;AAAA,MACtC,WAAW,OAAO,KAAM;AACtB,gBAAQ,MAAM,KAAM,QAAQ,CAAC,IAAI;AAAA,MACnC;AACA,aAAO,IAAI,SAAQ;AAAA,IACrB;AAGA,UAAM,YAAY,MAAM;AACtB,UAAI,MAAM,OAAO;AACfC,eAAAA,QAAc,SAAS,CAAC,MAAM,KAAK,CAAC;AAAA,MACtC;AAAA,IACF;AAEA,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IAEjC;AAEA,UAAM,qBAAqB,MAAM;AAC/B,wBAAkB,QAAQ,CAAC,kBAAkB;AAAA,IAE/C;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,MAAM,OAAO;AACfA,uBAAc,WAAW,MAAM,KAAK;AAAA,MACtC;AAAA,IACF;AAEA,UAAM,YAAY,MAAM;AACtB,aAAO,KAAK,EAAE,MAAM,cAAc,QAAQ,EAAE,KAAK,MAAM,MAAM,IAAG,EAAE,CAAE;AAAA,IACtE;AAEA,UAAM,cAAc,YAAY;AAC9B,UAAI,QAAQ,6CAA6C,GAAG;AAC1D,YAAI;AACF,gBAAMC,OAAAA,QAAc,YAAY,MAAM,MAAM,GAAG;AAC/C,iBAAO,KAAK,EAAE,MAAM,gBAAe,CAAE;AAAA,QACvC,SAAS,OAAO;AACd,kBAAQ,MAAM,2BAA2B,KAAK;AAAA,QAChD;AAAA,MACF;AAAA,IACF;AAEA,UAAM,WAAW,MAAM;AACrB,gBAAU,UAAU,UAAU,OAAO,SAAS,IAAI;AAClD,mBAAa,QAAQ;AAAA,IACvB;AAGA,UAAM,iBAAiB,YAAY;AACjC,UAAI;AACF,cAAMA,OAAAA,QAAc,gBAAgB,MAAM,OAAO,GAAG;AACpD,cAAMA,OAAAA,QAAc,mBAAmB,MAAM,OAAO,GAAG;AAAA,MACzD,SAAS,OAAO;AACd,gBAAQ,MAAM,wBAAwB,KAAK;AAAA,MAC7C;AAAA,IACF;AAGAC,QAAAA,UAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,eAAc;AAEpB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"Track.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Track.vue"],"sourcesContent":["<!-- components/pages/Track.vue -->\n<template>\n <div class=\"track-page pd-small\">\n <!-- Loading -->\n <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n <Loader />\n </div>\n\n <!-- Not Found -->\n <div v-if=\"hasLoaded && !track\" class=\"t-center pd-big\">\n <h2 class=\"\">Track not found</h2>\n <p class=\"t-transp t-medium\">The track you're looking for doesn't exist or has been removed.</p>\n </div>\n\n <!-- Track Content -->\n <div v-if=\"track\" class=\"track-content cols-2-fit-content mobile:cols-1 gap-big\">\n <!-- Left Column - Cover & Stats -->\n <div class=\"pos-sticky pos-t-0 mobile:pos-relative track-cover-section\">\n <!-- Cover with Play Overlay -->\n <div class=\"cover-container pos-relative mn-b-medium radius-big o-hidden\">\n <Media \n :url=\"track.coverUrl \|\| (track.album && track.album.coverUrl) \|\| '/logo/logo-placeholder.jpg'\" \n :alt=\"track.title\"\n class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n />\n <div class=\"cover-overlay w-100 h-100 pos-absolute pos-t-0 pos-r-0 bg-black-transp-40 flex flex-center\">\n <Button\n @click=\"playTrack\"\n color=\"white\"\n size=\"big\"\n class=\"w-5r h-5r radius-big bg-main shadow-big hover-scale-110\"\n >\n <IconPlay v-if=\"!isPlaying\" fill=\"rgb(var(--white))\" class=\"i-medium\" />\n <IconPause v-else fill=\"rgb(var(--white))\" class=\"i-medium\" />\n </Button>\n </div>\n </div>\n\n \n\n <!-- Quick Stats -->\n <div class=\"stats-grid grid cols-2 gap-small\">\n <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n <div class=\" mn-b-thin\">{{ formatNumber(track.playCount) }}</div>\n <div class=\"t-small t-transp t-uppercase\">Plays</div>\n </div>\n <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n <div class=\" mn-b-thin\">{{ formatNumber(track.views) }}</div>\n <div class=\"t-small t-transp t-uppercase\">Views</div>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Track Details -->\n <div class=\"track-details-section\">\n <!-- Track Type Badge -->\n <div class=\"flex items-center gap-small mn-b-small\">\n <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">Single</span>\n <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">Explicit</span>\n </div>\n\n <!-- Track Title -->\n <h1 class=\"h1 mn-b-medium\">{{ track.title }}</h1>\n <!-- Action Buttons -->\n <div class=\"flex gap-small mn-b-medium\">\n <Button\n @click=\"playTrack\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 t-white bg-black radius-thin flex-center gap-thin\"\n >\n <IconPlay v-if=\"!isPlaying\" fill=\"rgb(var(--white))\" class=\"i-medium\" />\n <IconPause v-else fill=\"rgb(var(--white))\" class=\"i-medium\" />\n {{ !isPlaying ? 'Play' : 'Pause'}}\n </Button>\n\n <Button\n @click=\"addToQueue\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconAdd class=\"i-medium\" />\n Add to Queue\n </Button>\n\n <Button\n @click=\"toggleFavorite\"\n color=\"primary\"\n size=\"medium\"\n class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n >\n <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'\" />\n {{isFavorite ? 'Liked' : 'Like'}}\n </Button>\n\n <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" v-model=\"showDropdown\" class=\"relative\">\n <template #trigger>\n <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n <IconEllipsis class=\"w-1-25r h-1-25r\" />\n </Button>\n </template>\n <template #default>\n <div class=\"dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin\">\n <Button @click=\"showAddToPlaylistModal = true\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Add to Playlist\n </Button>\n <Button @click=\"copyLink\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Copy Link\n </Button>\n <template v-if=\"isOwner\">\n <hr class=\"mn-v-thin border-dark-transp-10\" />\n <Button @click=\"editTrack\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n Edit Track\n </Button>\n <Button @click=\"deleteTrack\" color=\"danger\" size=\"small\" class=\"w-100 justify-start\">\n Delete Track\n </Button>\n </template>\n </div>\n </template>\n </Dropdown>\n </div>\n\n <!-- Artist Card -->\n <div class=\"artists-section mn-b-medium\">\n <h3 class=\"t-medium mn-b-small\" v-if=\"track.artist\">Artist</h3>\n <div class=\"flex flex-col gap-small\">\n <ArtistCardSmall \n :key=\"track.artist._id\"\n :artist=\"track.artist\"\n :is-following=\"isFollowingArtist\"\n :show-follow-button=\"!isOwner\"\n @toggle-follow=\"toggleFollowArtist\"\n />\n </div>\n </div>\n\n <!-- Metadata Cards -->\n <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n <!-- Release Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <IconCalendar class=\"i-regular t-primary\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Released</div>\n <div class=\"t-medium \">{{ formatDate(track.releaseDate) }}</div>\n </div>\n </div>\n\n <!-- Total Duration -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <IconClock class=\"i-regular t-primary\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Duration</div>\n <div class=\"t-medium \">{{ formatDuration(track.duration) }}</div>\n </div>\n </div>\n\n <!-- Label -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <IconCheck class=\"i-regular t-primary\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Status</div>\n <div class=\"t-medium \">{{ track.status }}</div>\n </div>\n </div>\n\n <!-- Visibility -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n <IconEye class=\"i-regular t-primary\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n <div class=\"t-medium \">{{ track.isPublic ? 'Public' : 'Private' }}</div>\n </div>\n </div>\n </div>\n\n\n <!-- Album Info -->\n <h3 v-if=\"track.album\" class=\"t-medium mn-b-small\">From Album</h3>\n <div v-if=\"track.album\" class=\"album-card bg-light pd-medium radius-medium mn-b-medium\">\n \n <router-link \n :to=\"`/album/${track.album.url}`\"\n class=\"flex flex-v-center gap-thin hover-opacity\"\n >\n <Media \n :url=\"track.album.coverArt \|\| '/logo/logo-placeholder.jpg'\"\n :alt=\"track.album.title\"\n class=\"w-3r h-3r radius-thin o-hidden object-cover\"\n />\n <span class=\"t-medium \">{{ track.album.title }}</span>\n </router-link>\n </div>\n\n <!-- Genres & Tags -->\n <div v-if=\"(track.genre && track.genre.length) \|\| (track.tags && track.tags.length)\" class=\"tags-section mn-b-medium\">\n <h3 class=\"t-medium mn-b-small\">Genres & Tags</h3>\n <div class=\"flex gap-thin flex-wrap\">\n <span \n v-for=\"genre in track.genre\" \n :key=\"genre\"\n class=\"tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer\"\n >\n {{ genre.name \|\| genre }}\n </span>\n <span \n v-for=\"tag in track.tags\" \n :key=\"tag\"\n class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n >\n #{{ tag.name \|\| tag }}\n </span>\n </div>\n </div>\n\n <!-- Description -->\n <div v-if=\"track.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n <h3 class=\"t-medium mn-b-small\">About</h3>\n <p class=\"t-transp\">{{ track.description }}</p>\n </div>\n\n <!-- Lyrics -->\n <div v-if=\"track.lyrics\" class=\"lyrics-section bg-light pd-medium radius-medium\">\n <h3 class=\"t-medium mn-b-small\">Lyrics</h3>\n <pre class=\"t-transp t-small\">{{ track.lyrics }}</pre>\n </div>\n </div>\n </div>\n\n <!-- Related Tracks -->\n <section v-if=\"track && relatedTracks && relatedTracks.length\" class=\"related-section mn-t-big\">\n <h2 class=\"h2 mn-b-medium\">Related Tracks</h2>\n <Feed\n :store=\"{\n read: () => new Promise(resolve => resolve(relatedTracks \|\| [])),\n state: { isLoading: false }\n }\"\n :external=\"true\"\n :items=\"relatedTracks\"\n :states=\"{\n empty: {\n title: 'No related tracks',\n description: 'Check back later for recommendations',\n class: 'pd-medium bg-light radius-medium'\n }\n }\"\n class=\"grid cols-2 cols-m-3 cols-l-4 gap-medium\"\n >\n <template #default=\"{ items }\">\n <div class=\"bg-light radius-medium o-hidden\">\n <TrackListCard\n v-for=\"(relatedTrack, index) in items\"\n :key=\"relatedTrack._id\"\n :track=\"relatedTrack\"\n :index=\"index\"\n :showAlbum=\"true\"\n :showCover=\"true\"\n />\n </div>\n </template>\n </Feed>\n </section>\n\n <!-- Add to Playlist Modal -->\n <Popup \n v-if=\"showAddToPlaylistModal\" \n @close-popup=\"showAddToPlaylistModal = false\" \n class=\"bg-white pd-medium w-m-25r radius-medium\"\n >\n <h3 class=\"h3 mn-b-medium\">Add to Playlist</h3>\n <!-- <PlaylistSelector \n :trackId=\"track._id\" \n @added=\"showAddToPlaylistModal = false\"\n /> -->\n <p class=\"t-transp\">Playlist selector coming soon...</p>\n </Popup>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\n// Icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconCheck from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n// import PlaylistSelector from '../forms/PlaylistSelector.vue';\n\n// Store\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst isPlaying = computed(() => playerState.isPlaying);\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst showDropdown = ref(false);\nconst showAddToPlaylistModal = ref(false);\nconst isFavorite = ref(false);\nconst isFollowingArtist = ref(false);\n\n// Clear state\ntracksState.currentTrack = null;\ntracksState.relatedTracks = [];\n\n// Computed\nconst track = computed(() => tracksState.currentTrack);\nconst relatedTracks = computed(() => tracksState.relatedTracks \|\| []);\n\nconst isOwner = computed(() => {\n return track.value?.owner?.target === authState.user?._id;\n});\n\n// Format helpers\nconst formatDuration = (seconds) => {\n if (!seconds) return '0:00';\n const h = Math.floor(seconds / 3600);\n const m = Math.floor((seconds % 3600) / 60);\n const s = Math.floor(seconds % 60);\n \n if (h > 0) {\n return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n }\n return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatDate = (dateString) => {\n if (!dateString) return 'Unknown';\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n};\n\nconst formatNumber = (num) => {\n if (!num) return '0';\n if (num >= 1000000) {\n return (num / 1000000).toFixed(1) + 'M';\n } else if (num >= 1000) {\n return (num / 1000).toFixed(1) + 'K';\n }\n return num.toString();\n};\n\n// Actions\nconst playTrack = () => {\n if (track.value) {\n playerActions.setQueue([track.value]);\n }\n};\n\nconst toggleFavorite = () => {\n isFavorite.value = !isFavorite.value;\n // TODO: Implement actual saving\n};\n\nconst toggleFollowArtist = () => {\n isFollowingArtist.value = !isFollowingArtist.value;\n // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n if (track.value) {\n playerActions.addToQueue(track.value);\n }\n};\n\nconst editTrack = () => {\n router.push({ name: 'track-edit', params: { url: track.value.url } });\n};\n\nconst deleteTrack = async () => {\n if (confirm('Are you sure you want to delete this track?')) {\n try {\n await tracksActions.deleteTrack(track.value._id);\n router.push({ name: 'music-library' });\n } catch (error) {\n console.error('Failed to delete track:', error);\n }\n }\n};\n\nconst copyLink = () => {\n navigator.clipboard.writeText(window.location.href);\n showDropdown.value = false;\n};\n\n// Data fetching\nconst fetchTrackData = async () => {\n try {\n await tracksActions.fetchTrackByUrl(route.params.url);\n await tracksActions.fetchRelatedTracks(route.params.url);\n } catch (error) {\n console.error('Error loading track:', error);\n }\n};\n\n// Lifecycle\nonMounted(async () => {\n emits('page-loading');\n \n await fetchTrackData();\n \n hasLoaded.value = true;\n emits('page-loaded');\n});\n</script>\n\n<style scoped>\n</style>"],"names":["computed","playerState","useRoute","useRouter","ref","tracksState","authState","playerActions","tracksActions","onMounted"],"mappings":"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"}