@ozdao/martyrs 0.2.491 → 0.2.493

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

@@ -2,16 +2,25 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Loader = require("../../../../components/Loader/Loader.vue.cjs");
-;/* empty css                                         */
-;/* empty css                                             */
-;/* empty css                                        */
+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 Popup = require("../../../../components/Popup/Popup.vue.cjs");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
-const TrackCard = require("../cards/TrackCard.vue.cjs");
+const IconPlay = require("../../../icons/navigation/IconPlay.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");
+const IconTime = require("../../../icons/entities/IconTime.vue.cjs");
+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 tracks = require("../../store/tracks.cjs");
-require("../../store/player.cjs");
+const player = require("../../store/player.cjs");
 const auth = require("../../../auth/views/store/auth.cjs");
-const _hoisted_1 = { class: "track-page" };
+const _hoisted_1 = { class: "track-page pd-small" };
 const _hoisted_2 = {
   key: 0,
   class: "w-100 h-25r flex-center flex"
@@ -20,89 +29,477 @@ const _hoisted_3 = {
   key: 1,
   class: "t-center pd-big"
 };
-const _hoisted_4 = { key: 2 };
-const _hoisted_5 = {
+const _hoisted_4 = {
+  key: 2,
+  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 = {
+  key: 0,
+  class: "badge bg-danger-transp-20 t-danger pd-thin-big radius-small t-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_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 = {
   key: 0,
-  class: "track-lyrics mn-b-medium pd-medium bg-dark-transp-10 radius-medium"
+  class: "album-card bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_6 = { class: "t-grey" };
-const _hoisted_7 = {
+const _hoisted_37 = { class: "t-medium" };
+const _hoisted_38 = {
   key: 1,
-  class: "related-tracks mn-b-medium"
+  class: "tags-section mn-b-medium"
+};
+const _hoisted_39 = { class: "flex gap-thin flex-wrap" };
+const _hoisted_40 = {
+  key: 2,
+  class: "description-section bg-light pd-medium radius-medium mn-b-medium"
+};
+const _hoisted_41 = { class: "t-transp" };
+const _hoisted_42 = {
+  key: 3,
+  class: "lyrics-section bg-light pd-medium radius-medium"
+};
+const _hoisted_43 = { class: "t-transp t-small" };
+const _hoisted_44 = {
+  key: 3,
+  class: "related-section mn-t-big"
 };
+const _hoisted_45 = { class: "bg-light radius-medium o-hidden" };
 const _sfc_main = {
   __name: "Track",
-  setup(__props) {
+  emits: ["page-loading", "page-loaded"],
+  setup(__props, { emit: __emit }) {
     const route = vueRouter.useRoute();
-    vueRouter.useRouter();
-    const isLoading = vue.ref(true);
-    vue.ref(false);
-    vue.ref(false);
-    vue.ref(false);
+    const router = vueRouter.useRouter();
+    const emits = __emit;
+    const hasLoaded = vue.ref(false);
+    const showDropdown = vue.ref(false);
+    const showAddToPlaylistModal = vue.ref(false);
+    const isFavorite = vue.ref(false);
+    const isFollowingArtist = vue.ref(false);
+    tracks.state.currentTrack = null;
+    tracks.state.relatedTracks = [];
     const track = vue.computed(() => tracks.state.currentTrack);
-    const relatedTracks = vue.computed(() => tracks.state.relatedTracks);
-    vue.computed(() => {
-      var _a, _b, _c;
-      return ((_b = (_a = track.value) == null ? void 0 : _a.owner) == null ? void 0 : _b.target) === ((_c = auth.state.user) == null ? void 0 : _c._id);
+    const relatedTracks = vue.computed(() => tracks.state.relatedTracks || []);
+    const isOwner = vue.computed(() => {
+      return track.value?.owner?.target === auth.state.user?._id;
     });
+    const formatDuration = (seconds) => {
+      if (!seconds) return "0:00";
+      const h = Math.floor(seconds / 3600);
+      const m = Math.floor(seconds % 3600 / 60);
+      const s = Math.floor(seconds % 60);
+      if (h > 0) {
+        return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+      }
+      return `${m}:${s.toString().padStart(2, "0")}`;
+    };
+    const formatDate = (dateString) => {
+      if (!dateString) return "Unknown";
+      return new Date(dateString).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      });
+    };
+    const formatNumber = (num) => {
+      if (!num) return "0";
+      if (num >= 1e6) {
+        return (num / 1e6).toFixed(1) + "M";
+      } else if (num >= 1e3) {
+        return (num / 1e3).toFixed(1) + "K";
+      }
+      return num.toString();
+    };
+    const playTrack = () => {
+      if (track.value) {
+        player.actions.setQueue([track.value]);
+      }
+    };
+    const toggleFavorite = () => {
+      isFavorite.value = !isFavorite.value;
+    };
+    const toggleFollowArtist = () => {
+      isFollowingArtist.value = !isFollowingArtist.value;
+    };
+    const addToQueue = () => {
+      if (track.value) {
+        player.actions.addToQueue(track.value);
+      }
+    };
+    const editTrack = () => {
+      router.push({ name: "track-edit", params: { url: track.value.url } });
+    };
+    const deleteTrack = async () => {
+      if (confirm("Are you sure you want to delete this track?")) {
+        try {
+          await tracks.actions.deleteTrack(track.value._id);
+          router.push({ name: "music-library" });
+        } catch (error) {
+          console.error("Failed to delete track:", error);
+        }
+      }
+    };
+    const copyLink = () => {
+      navigator.clipboard.writeText(window.location.href);
+      showDropdown.value = false;
+    };
     const fetchTrackData = async () => {
-      isLoading.value = true;
       try {
         await tracks.actions.fetchTrackByUrl(route.params.url);
         await tracks.actions.fetchRelatedTracks(route.params.url);
       } catch (error) {
         console.error("Error loading track:", error);
-      } finally {
-        isLoading.value = false;
       }
     };
-    vue.onMounted(fetchTrackData);
-    vue.watch(() => route.params.url, fetchTrackData);
+    vue.onMounted(async () => {
+      emits("page-loading");
+      await fetchTrackData();
+      hasLoaded.value = true;
+      emits("page-loaded");
+    });
     return (_ctx, _cache) => {
+      const _component_router_link = vue.resolveComponent("router-link");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+        _ctx.isLoading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
           vue.createVNode(Loader.default)
-        ])) : !track.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _cache[0] || (_cache[0] = [
+        ])) : vue.createCommentVNode("", true),
+        hasLoaded.value && !track.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _cache[3] || (_cache[3] = [
           vue.createElementVNode("h2", { class: "" }, "Track not found", -1),
-          vue.createElementVNode("p", { class: "t-grey t-medium" }, "The track you're looking for doesn't exist or has been removed.", -1)
-        ]))) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-          track.value.lyrics ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-            _cache[1] || (_cache[1] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Lyrics", -1)),
-            vue.createElementVNode("pre", _hoisted_6, vue.toDisplayString(track.value.lyrics), 1)
-          ])) : vue.createCommentVNode("", true),
-          relatedTracks.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_7, [
-            _cache[2] || (_cache[2] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Related Tracks", -1)),
-            vue.createVNode(Feed.default, {
-              store: {
-                read: () => _ctx.Promise.resolve(relatedTracks.value.value),
-                state: { isLoading: false }
-              },
-              external: true,
-              items: relatedTracks.value,
-              states: {
-                empty: {
-                  title: "No related tracks",
-                  description: "Check back later for recommendations",
-                  class: "pd-medium bg-dark-transp-10 radius-medium"
-                }
-              },
-              class: "gap-thin"
-            }, {
-              default: vue.withCtx(({ items }) => [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (relatedTrack) => {
-                  return vue.openBlock(), vue.createBlock(TrackCard.default, {
+          vue.createElementVNode("p", { class: "t-transp t-medium" }, "The track you're looking for doesn't exist or has been removed.", -1)
+        ]))) : vue.createCommentVNode("", true),
+        track.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.createElementVNode("div", _hoisted_5, [
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createVNode(Media.default, {
+                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"])
+            ]),
+            vue.createElementVNode("div", _hoisted_7, [
+              vue.createElementVNode("div", _hoisted_8, [
+                vue.createElementVNode("div", _hoisted_9, 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),
+                _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.createVNode(Button.default, {
+                onClick: playTrack,
+                color: "primary",
+                size: "medium",
+                class: "flex-1 flex-center gap-thin"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(IconPlay.default, { class: "w-1r h-1r" }),
+                  _cache[7] || (_cache[7] = vue.createTextVNode(" Play "))
+                ]),
+                _: 1
+              }),
+              vue.createVNode(Button.default, {
+                onClick: toggleFavorite,
+                color: isFavorite.value ? "danger" : "transp",
+                size: "medium",
+                class: "w-3r h-3r radius-full"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(IconLike.default, {
+                    class: "w-1-25r h-1-25r",
+                    fill: isFavorite.value
+                  }, null, 8, ["fill"])
+                ]),
+                _: 1
+              }, 8, ["color"]),
+              vue.createVNode(Button.default, {
+                onClick: addToQueue,
+                color: "transp",
+                size: "medium",
+                class: "w-3r h-3r radius-full"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(IconAdd.default, { class: "w-1-25r h-1-25r" })
+                ]),
+                _: 1
+              }),
+              vue.createVNode(Dropdown.default, {
+                modelValue: showDropdown.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showDropdown.value = $event),
+                class: "relative"
+              }, {
+                trigger: vue.withCtx(() => [
+                  vue.createVNode(Button.default, {
+                    color: "transp",
+                    size: "medium",
+                    class: "w-3r h-3r radius-full"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(IconEllipsis.default, { class: "w-1-25r h-1-25r" })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_17, [
+                    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[8] || (_cache[8] = [
+                        vue.createTextVNode(" Add to Playlist ")
+                      ])),
+                      _: 1
+                    }),
+                    vue.createVNode(Button.default, {
+                      onClick: copyLink,
+                      color: "transp",
+                      size: "small",
+                      class: "w-100 justify-start"
+                    }, {
+                      default: vue.withCtx(() => _cache[9] || (_cache[9] = [
+                        vue.createTextVNode(" Copy Link ")
+                      ])),
+                      _: 1
+                    }),
+                    isOwner.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      _cache[12] || (_cache[12] = 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[10] || (_cache[10] = [
+                          vue.createTextVNode(" Edit Track ")
+                        ])),
+                        _: 1
+                      }),
+                      vue.createVNode(Button.default, {
+                        onClick: deleteTrack,
+                        color: "danger",
+                        size: "small",
+                        class: "w-100 justify-start"
+                      }, {
+                        default: vue.withCtx(() => _cache[11] || (_cache[11] = [
+                          vue.createTextVNode(" Delete Track ")
+                        ])),
+                        _: 1
+                      })
+                    ], 64)) : vue.createCommentVNode("", true)
+                  ])
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ]),
+            vue.createElementVNode("div", _hoisted_18, [
+              vue.createVNode(_component_router_link, {
+                to: `/artist/${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[13] || (_cache[13] = 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_23, [
+              vue.createElementVNode("div", _hoisted_24, [
+                vue.createElementVNode("div", _hoisted_25, [
+                  vue.createVNode(IconTime.default, { class: "w-1-5r h-1-5r t-primary" })
+                ]),
+                vue.createElementVNode("div", null, [
+                  _cache[14] || (_cache[14] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
+                  vue.createElementVNode("div", _hoisted_26, vue.toDisplayString(formatDuration(track.value.duration)), 1)
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_27, [
+                vue.createElementVNode("div", _hoisted_28, [
+                  vue.createVNode(IconCalendar.default, { class: "w-1-5r h-1-5r t-primary" })
+                ]),
+                vue.createElementVNode("div", null, [
+                  _cache[15] || (_cache[15] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
+                  vue.createElementVNode("div", _hoisted_29, vue.toDisplayString(formatDate(track.value.releaseDate)), 1)
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_30, [
+                vue.createElementVNode("div", _hoisted_31, [
+                  vue.createVNode(IconCheckmark.default, { class: "w-1-5r h-1-5r t-success" })
+                ]),
+                vue.createElementVNode("div", null, [
+                  _cache[16] || (_cache[16] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Status", -1)),
+                  vue.createElementVNode("div", _hoisted_32, vue.toDisplayString(track.value.status), 1)
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_33, [
+                vue.createElementVNode("div", _hoisted_34, [
+                  vue.createVNode(IconShow.default, { class: "w-1-5r h-1-5r t-primary" })
+                ]),
+                vue.createElementVNode("div", null, [
+                  _cache[17] || (_cache[17] = 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)
+                ])
+              ])
+            ]),
+            track.value.album ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_36, [
+              _cache[18] || (_cache[18] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase mn-b-thin" }, "From Album", -1)),
+              vue.createVNode(_component_router_link, {
+                to: `/album/${track.value.album.url}`,
+                class: "flex items-center gap-medium hover-opacity"
+              }, {
+                default: vue.withCtx(() => [
+                  track.value.album.coverUrl ? (vue.openBlock(), vue.createBlock(Media.default, {
+                    key: 0,
+                    src: track.value.album.coverUrl,
+                    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)
+                ]),
+                _: 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[19] || (_cache[19] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
+              vue.createElementVNode("div", _hoisted_39, [
+                (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);
+                }), 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);
+                }), 128))
+              ])
+            ])) : vue.createCommentVNode("", true),
+            track.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [
+              _cache[20] || (_cache[20] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
+              vue.createElementVNode("p", _hoisted_41, vue.toDisplayString(track.value.description), 1)
+            ])) : vue.createCommentVNode("", true),
+            track.value.lyrics ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_42, [
+              _cache[21] || (_cache[21] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Lyrics", -1)),
+              vue.createElementVNode("pre", _hoisted_43, 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[22] || (_cache[22] = vue.createElementVNode("h2", { class: "h2 mn-b-medium" }, "Related Tracks", -1)),
+          vue.createVNode(Feed.default, {
+            store: {
+              read: () => new _ctx.Promise((resolve) => resolve(relatedTracks.value || [])),
+              state: { isLoading: false }
+            },
+            external: true,
+            items: relatedTracks.value,
+            states: {
+              empty: {
+                title: "No related tracks",
+                description: "Check back later for recommendations",
+                class: "pd-medium bg-light radius-medium"
+              }
+            },
+            class: "grid cols-2 cols-m-3 cols-l-4 gap-medium"
+          }, {
+            default: vue.withCtx(({ items }) => [
+              vue.createElementVNode("div", _hoisted_45, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (relatedTrack, index) => {
+                  return vue.openBlock(), vue.createBlock(TrackListCard.default, {
                     key: relatedTrack._id,
                     track: relatedTrack,
+                    index,
                     showAlbum: true,
-                    showCover: true,
-                    class: "w-100 bg-dark-transp-10 radius-medium"
-                  }, null, 8, ["track"]);
+                    showCover: true
+                  }, null, 8, ["track", "index"]);
                 }), 128))
-              ]),
-              _: 1
-            }, 8, ["store", "items"])
-          ])) : vue.createCommentVNode("", true)
-        ]))
+              ])
+            ]),
+            _: 1
+          }, 8, ["store", "items"])
+        ])) : vue.createCommentVNode("", true),
+        showAddToPlaylistModal.value ? (vue.openBlock(), vue.createBlock(Popup.default, {
+          key: 4,
+          onClosePopup: _cache[2] || (_cache[2] = ($event) => showAddToPlaylistModal.value = false),
+          class: "bg-dark pd-medium w-m-25r radius-medium"
+        }, {
+          default: vue.withCtx(() => _cache[23] || (_cache[23] = [
+            vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Add to Playlist", -1),
+            vue.createElementVNode("p", { class: "t-transp" }, "Playlist selector coming soon...", -1)
+          ])),
+          _: 1
+        })) : vue.createCommentVNode("", true)
       ]);
     };
   }

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

@@ -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\">\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-else-if=\"!track\" class=\"t-center pd-big\">\n      <h2 class=\"\">Track not found</h2>\n      <p class=\"t-grey 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-else>\n      <!-- ... [HEADER + ACTIONS as you posted] -->\n\n      <!-- Track Lyrics -->\n      <div v-if=\"track.lyrics\" class=\"track-lyrics mn-b-medium pd-medium bg-dark-transp-10 radius-medium\">\n        <h2 class=\" mn-b-small\">Lyrics</h2>\n        <pre class=\"t-grey\">{{ track.lyrics }}</pre>\n      </div>\n\n      <!-- Related Tracks -->\n      <section v-if=\"relatedTracks.length\" class=\"related-tracks mn-b-medium\">\n        <h2 class=\" mn-b-small\">Related Tracks</h2>\n        <Feed\n          :store=\"{\n            read: () => Promise.resolve(relatedTracks.value),\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-dark-transp-10 radius-medium'\n            }\n          }\"\n          class=\"gap-thin\"\n        >\n          <template #default=\"{ items }\">\n            <TrackCard\n              v-for=\"relatedTrack in items\"\n              :key=\"relatedTrack._id\"\n              :track=\"relatedTrack\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n              class=\"w-100 bg-dark-transp-10 radius-medium\"\n            />\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-dark pd-small w-m-25r radius-medium \"\n      >\n        <h3 class=\"mn-b-medium\">Add to Playlist</h3>\n        <PlaylistSelector \n          :trackId=\"track._id\" \n          @added=\"showAddToPlaylistModal = false\"\n        />\n      </Popup> -->\n    </div>\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 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 Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackCard from '../cards/TrackCard.vue';\n// import PlaylistSelector from '../forms/PlaylistSelector.vue';\n\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\nconst isLoading = ref(true);\nconst showDropdown = ref(false);\nconst showAddToPlaylistModal = ref(false);\nconst isFavorite = ref(false);\n\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\nconst getArtistName = (track) => {\n  if (!track || !track.artist) return 'Unknown';\n  return typeof track.artist === 'object' ? track.artist.name : 'Unknown';\n};\n\nconst formatReleaseYear = (date) => {\n  return date ? new Date(date).getFullYear() : 'Unknown';\n};\n\nconst playTrack = () => {\n  if (track.value) {\n    playerActions.setQueue([track.value]);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // You can implement actual saving here\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  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\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n  showDropdown.value = false;\n};\n\nconst fetchTrackData = async () => {\n  isLoading.value = true;\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  } finally {\n    isLoading.value = false;\n  }\n};\n\nonMounted(fetchTrackData);\nwatch(() => route.params.url, fetchTrackData);\n</script>\n"],"names":["useRoute","useRouter","ref","computed","tracksState","authState","tracksActions","onMounted","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2FA,UAAM,QAAQA,UAAAA,SAAU;AACTC,cAAS,UAAA;AAExB,UAAM,YAAYC,IAAG,IAAC,IAAI;AACLA,QAAAA,IAAI,KAAK;AACCA,QAAAA,IAAI,KAAK;AACrBA,QAAAA,IAAI,KAAK;AAE5B,UAAM,QAAQC,IAAQ,SAAC,MAAMC,OAAW,MAAC,YAAY;AACrD,UAAM,gBAAgBD,IAAQ,SAAC,MAAMC,OAAW,MAAC,aAAa;AAE9CD,QAAAA,SAAS,MAAM;;AAC7B,eAAO,iBAAM,UAAN,mBAAa,UAAb,mBAAoB,cAAWE,UAAAA,MAAU,SAAVA,mBAAgB;AAAA,IACxD,CAAC;AA8CD,UAAM,iBAAiB,YAAY;AACjC,gBAAU,QAAQ;AAClB,UAAI;AACF,cAAMC,OAAa,QAAC,gBAAgB,MAAM,OAAO,GAAG;AACpD,cAAMA,OAAa,QAAC,mBAAmB,MAAM,OAAO,GAAG;AAAA,MACxD,SAAQ,OAAO;AACd,gBAAQ,MAAM,wBAAwB,KAAK;AAAA,MAC/C,UAAY;AACR,kBAAU,QAAQ;AAAA,MACtB;AAAA,IACA;AAEAC,QAAS,UAAC,cAAc;AACxBC,QAAK,MAAC,MAAM,MAAM,OAAO,KAAK,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 flex-center gap-thin\"\n          >\n            <IconPlay class=\"w-1r h-1r\" />\n            Play\n          </Button>\n          \n          <Button\n            @click=\"toggleFavorite\"\n            :color=\"isFavorite ? 'danger' : 'transp'\"\n            size=\"medium\"\n            class=\"w-3r h-3r radius-full\"\n          >\n            <IconLike class=\"w-1-25r h-1-25r\" :fill=\"isFavorite\" />\n          </Button>\n          \n          <Button\n            @click=\"addToQueue\"\n            color=\"transp\"\n            size=\"medium\"\n            class=\"w-3r h-3r radius-full\"\n          >\n            <IconAdd class=\"w-1-25r h-1-25r\" />\n          </Button>\n          \n          <Dropdown 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=\"`/artist/${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=\"w-1-5r h-1-5r 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=\"w-1-5r h-1-5r 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=\"w-1-5r h-1-5r 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=\"w-1-5r h-1-5r 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-dark 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgVA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}