@ozdao/martyrs 0.2.485 → 0.2.487

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

@@ -0,0 +1,467 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const Button = require("../../../../components/Button/Button.vue.cjs");
+const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
+const artists = require("../../store/artists.cjs");
+const auth = require("../../../auth/views/store/auth.cjs");
+const globals = require("../../../globals/views/store/globals.cjs");
+const mixins = require("../../../globals/views/mixins/mixins.cjs");
+const _hoisted_1 = {
+  key: 0,
+  class: "flex-center flex pd-extra"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "flex-center flex-column flex pd-extra"
+};
+const _hoisted_3 = { key: 2 };
+const _hoisted_4 = {
+  key: 0,
+  class: "pos-absolute pos-t-medium pos-r-medium z-index-1"
+};
+const _hoisted_5 = { class: "flex-v-center t-white pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center" };
+const _hoisted_6 = { class: "w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium" };
+const _hoisted_7 = ["src"];
+const _hoisted_8 = {
+  key: 1,
+  class: "w-100 h-100 bg-white flex-center flex"
+};
+const _hoisted_9 = { class: "h1" };
+const _hoisted_10 = { class: "mobile:t-center" };
+const _hoisted_11 = { class: "flex-v-center flex-nowrap flex mn-b-small mobile:flex-center" };
+const _hoisted_12 = { class: "h1 mn-r-small" };
+const _hoisted_13 = {
+  key: 0,
+  class: "bg-main-nano pd-micro radius-small"
+};
+const _hoisted_14 = {
+  key: 0,
+  class: "p-medium mn-b-small"
+};
+const _hoisted_15 = { class: "flex flex-nowrap gap-small mobile:flex-center" };
+const _hoisted_16 = ["href"];
+const _hoisted_17 = ["href"];
+const _hoisted_18 = ["href"];
+const _hoisted_19 = ["href"];
+const _hoisted_20 = ["href"];
+const _hoisted_21 = { class: "pd-medium" };
+const _hoisted_22 = { class: "cols-2-1_2 gap-medium mobile:cols-1" };
+const _hoisted_23 = { class: "bg-light pd-medium radius-medium mn-b-medium" };
+const _hoisted_24 = {
+  key: 0,
+  class: "p-medium"
+};
+const _hoisted_25 = {
+  key: 1,
+  class: "p-medium t-transp"
+};
+const _hoisted_26 = {
+  key: 0,
+  class: "bg-light pd-medium radius-medium"
+};
+const _hoisted_27 = { class: "flex flex-wrap gap-small" };
+const _hoisted_28 = {
+  key: 0,
+  class: "bg-light pd-medium radius-medium mn-b-medium"
+};
+const _hoisted_29 = { class: "cols-2 gap-small mobile:cols-1" };
+const _hoisted_30 = ["onClick"];
+const _hoisted_31 = { class: "w-3r h-3r radius-small o-hidden mn-r-small" };
+const _hoisted_32 = ["src"];
+const _hoisted_33 = {
+  key: 1,
+  class: "w-100 h-100 bg-light flex-center flex"
+};
+const _hoisted_34 = { class: "w-100 o-hidden" };
+const _hoisted_35 = { class: "p-medium t-truncate" };
+const _hoisted_36 = { class: "p-small t-transp" };
+const _hoisted_37 = {
+  key: 1,
+  class: "bg-light pd-medium radius-medium"
+};
+const _hoisted_38 = { class: "cols-1 gap-small" };
+const _hoisted_39 = ["onClick"];
+const _hoisted_40 = { class: "w-3r h-3r radius-small o-hidden mn-r-small" };
+const _hoisted_41 = ["src"];
+const _hoisted_42 = {
+  key: 1,
+  class: "w-100 h-100 bg-light flex-center flex"
+};
+const _hoisted_43 = { class: "w-100 o-hidden" };
+const _hoisted_44 = { class: "p-medium t-truncate" };
+const _hoisted_45 = { class: "p-small t-transp" };
+const _hoisted_46 = {
+  key: 2,
+  class: "bg-light pd-medium radius-medium t-center"
+};
+const _hoisted_47 = {
+  key: 0,
+  class: "mn-t-medium"
+};
+const _hoisted_48 = { class: "cols-5 gap-medium mobile:cols-2" };
+const _hoisted_49 = ["onClick"];
+const _hoisted_50 = { class: "w-100 aspect-1x1 radius-medium o-hidden mn-b-small" };
+const _hoisted_51 = ["src"];
+const _hoisted_52 = {
+  key: 1,
+  class: "w-100 h-100 bg-light flex-center flex"
+};
+const _hoisted_53 = { class: "p-medium t-truncate" };
+const _sfc_main = {
+  __name: "Artist",
+  setup(__props) {
+    const { formatDate } = mixins.useGlobalMixins();
+    const router = vueRouter.useRouter();
+    const route = vueRouter.useRoute();
+    const isLoading = vue.ref(true);
+    const genres = vue.ref([]);
+    const artist = vue.computed(() => {
+      return artists.state.currentArtist;
+    });
+    const discography = vue.computed(() => {
+      return artists.state.discography;
+    });
+    const relatedArtists = vue.computed(() => {
+      return artists.state.relatedArtists;
+    });
+    const isOwner = vue.computed(() => {
+      var _a, _b;
+      if (!artist.value || !auth.state.user._id) return false;
+      return ((_b = (_a = artist.value.creator) == null ? void 0 : _a.target) == null ? void 0 : _b._id) === auth.state.user._id;
+    });
+    const fetchArtist = async () => {
+      var _a;
+      isLoading.value = true;
+      try {
+        const url = route.params.url;
+        if (!url) {
+          throw new Error("Artist URL is required");
+        }
+        await artists.actions.fetchArtistByUrl(url);
+        if (((_a = artist.value) == null ? void 0 : _a.genre) && artist.value.genre.length > 0) {
+          await fetchGenres();
+        }
+      } catch (error) {
+        console.error("Error fetching artist:", error);
+        globals.actions.setError({
+          message: "Failed to load artist"
+        });
+      } finally {
+        isLoading.value = false;
+      }
+    };
+    const fetchGenres = async () => {
+    };
+    const editArtist = () => {
+      router.push({
+        name: "artist-edit",
+        params: { url: artist.value.url }
+      });
+    };
+    const manageContent = () => {
+      router.push({
+        name: "artist-manage-content",
+        params: { artistId: artist.value._id }
+      });
+    };
+    const navigateToAlbum = (album) => {
+      router.push({
+        name: "album",
+        params: { url: album.url }
+      });
+    };
+    const navigateToTrack = (track) => {
+      router.push({
+        name: "track",
+        params: { url: track.url }
+      });
+    };
+    const navigateToArtist = (artist2) => {
+      router.push({
+        name: "artist",
+        params: { url: artist2.url }
+      });
+    };
+    const viewAllAlbums = () => {
+      router.push({
+        name: "artist-albums",
+        params: { artistId: artist.value._id }
+      });
+    };
+    const viewAllSingles = () => {
+      router.push({
+        name: "artist-singles",
+        params: { artistId: artist.value._id }
+      });
+    };
+    const addRelease = () => {
+      router.push({
+        name: "release-create",
+        query: { artistId: artist.value._id }
+      });
+    };
+    vue.onMounted(async () => {
+      await fetchArtist();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.createVNode(Loader.default)
+        ])) : !artist.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          _cache[1] || (_cache[1] = vue.createElementVNode("h2", { class: "h2 mn-b-medium" }, "Artist Not Found", -1)),
+          _cache[2] || (_cache[2] = vue.createElementVNode("p", { class: "p-medium t-transp mn-b-medium" }, "The artist you are looking for doesn't exist or may have been removed.", -1)),
+          vue.createVNode(Button.default, {
+            submit: () => vue.unref(router).push({ name: "music-home" }),
+            class: "bg-main",
+            showSucces: false,
+            showLoader: false
+          }, {
+            default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+              vue.createTextVNode(" Back to Music ")
+            ])),
+            _: 1
+          }, 8, ["submit"])
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+          vue.createElementVNode("div", {
+            class: "w-100 t-white h-50vh pos-relative",
+            style: vue.normalizeStyle(artist.value.coverUrl ? `background-image: url(${_ctx.FILE_SERVER_URL + artist.value.coverUrl}); background-size: cover; background-position: center;` : "")
+          }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small", artist.value.coverUrl ? "bg-black-transp-50" : "bg-black"])
+            }, null, 2),
+            isOwner.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              vue.createVNode(Button.default, {
+                submit: editArtist,
+                class: "bg-main mn-r-small",
+                showSucces: false,
+                showLoader: false
+              }, {
+                default: vue.withCtx(() => _cache[3] || (_cache[3] = [
+                  vue.createTextVNode(" Edit Artist ")
+                ])),
+                _: 1
+              }),
+              vue.createVNode(Button.default, {
+                submit: manageContent,
+                class: "bg-white t-black",
+                showSucces: false,
+                showLoader: false
+              }, {
+                default: vue.withCtx(() => _cache[4] || (_cache[4] = [
+                  vue.createTextVNode(" Manage Content ")
+                ])),
+                _: 1
+              })
+            ])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", _hoisted_5, [
+              vue.createElementVNode("div", _hoisted_6, [
+                artist.value.photoUrl ? (vue.openBlock(), vue.createElementBlock("img", {
+                  key: 0,
+                  src: _ctx.FILE_SERVER_URL + artist.value.photoUrl,
+                  alt: "Artist photo",
+                  class: "w-100 h-100 object-fit-cover"
+                }, null, 8, _hoisted_7)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                  vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(artist.value.name[0]), 1)
+                ]))
+              ]),
+              vue.createElementVNode("div", _hoisted_10, [
+                vue.createElementVNode("div", _hoisted_11, [
+                  vue.createElementVNode("h1", _hoisted_12, vue.toDisplayString(artist.value.name), 1),
+                  artist.value.isVerified ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_13, " ✓ Verified ")) : vue.createCommentVNode("", true)
+                ]),
+                artist.value.location ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_14, vue.toDisplayString(artist.value.location), 1)) : vue.createCommentVNode("", true),
+                vue.createElementVNode("div", _hoisted_15, [
+                  artist.value.socials.telegram ? (vue.openBlock(), vue.createElementBlock("a", {
+                    key: 0,
+                    href: `https://t.me/${artist.value.socials.telegram}`,
+                    target: "_blank",
+                    class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
+                  }, _cache[5] || (_cache[5] = [
+                    vue.createElementVNode("span", null, "T", -1)
+                  ]), 8, _hoisted_16)) : vue.createCommentVNode("", true),
+                  artist.value.socials.twitter ? (vue.openBlock(), vue.createElementBlock("a", {
+                    key: 1,
+                    href: `https://twitter.com/${artist.value.socials.twitter}`,
+                    target: "_blank",
+                    class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
+                  }, _cache[6] || (_cache[6] = [
+                    vue.createElementVNode("span", null, "𝕏", -1)
+                  ]), 8, _hoisted_17)) : vue.createCommentVNode("", true),
+                  artist.value.socials.instagram ? (vue.openBlock(), vue.createElementBlock("a", {
+                    key: 2,
+                    href: `https://instagram.com/${artist.value.socials.instagram}`,
+                    target: "_blank",
+                    class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
+                  }, _cache[7] || (_cache[7] = [
+                    vue.createElementVNode("span", null, "I", -1)
+                  ]), 8, _hoisted_18)) : vue.createCommentVNode("", true),
+                  artist.value.socials.facebook ? (vue.openBlock(), vue.createElementBlock("a", {
+                    key: 3,
+                    href: `https://facebook.com/${artist.value.socials.facebook}`,
+                    target: "_blank",
+                    class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
+                  }, _cache[8] || (_cache[8] = [
+                    vue.createElementVNode("span", null, "F", -1)
+                  ]), 8, _hoisted_19)) : vue.createCommentVNode("", true),
+                  artist.value.website ? (vue.openBlock(), vue.createElementBlock("a", {
+                    key: 4,
+                    href: artist.value.website,
+                    target: "_blank",
+                    class: "bg-white t-black flex-center flex w-2r h-2r radius-extra"
+                  }, _cache[9] || (_cache[9] = [
+                    vue.createElementVNode("span", null, "W", -1)
+                  ]), 8, _hoisted_20)) : vue.createCommentVNode("", true)
+                ])
+              ])
+            ])
+          ], 4),
+          vue.createElementVNode("div", _hoisted_21, [
+            vue.createElementVNode("div", _hoisted_22, [
+              vue.createElementVNode("div", null, [
+                vue.createElementVNode("div", _hoisted_23, [
+                  _cache[10] || (_cache[10] = vue.createElementVNode("h2", { class: "h3 mn-b-small" }, "Biography", -1)),
+                  artist.value.bio ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_24, vue.toDisplayString(artist.value.bio), 1)) : (vue.openBlock(), vue.createElementBlock("p", _hoisted_25, "No biography available for this artist."))
+                ]),
+                genres.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
+                  _cache[11] || (_cache[11] = vue.createElementVNode("h2", { class: "h3 mn-b-small" }, "Genres", -1)),
+                  vue.createElementVNode("div", _hoisted_27, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(genres.value, (genre) => {
+                      return vue.openBlock(), vue.createElementBlock("span", {
+                        key: genre._id,
+                        class: "bg-white pd-thin radius-medium"
+                      }, vue.toDisplayString(genre.name), 1);
+                    }), 128))
+                  ])
+                ])) : vue.createCommentVNode("", true)
+              ]),
+              vue.createElementVNode("div", null, [
+                discography.value.albums.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, [
+                  _cache[14] || (_cache[14] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Albums", -1)),
+                  vue.createElementVNode("div", _hoisted_29, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(discography.value.albums, (album) => {
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        key: album._id,
+                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white",
+                        onClick: ($event) => navigateToAlbum(album)
+                      }, [
+                        vue.createElementVNode("div", _hoisted_31, [
+                          album.coverUrl ? (vue.openBlock(), vue.createElementBlock("img", {
+                            key: 0,
+                            src: _ctx.FILE_SERVER_URL + album.coverUrl,
+                            alt: "Album cover",
+                            class: "w-100 h-100 object-fit-cover"
+                          }, null, 8, _hoisted_32)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_33, _cache[12] || (_cache[12] = [
+                            vue.createElementVNode("span", null, "A", -1)
+                          ])))
+                        ]),
+                        vue.createElementVNode("div", _hoisted_34, [
+                          vue.createElementVNode("p", _hoisted_35, vue.toDisplayString(album.title), 1),
+                          vue.createElementVNode("p", _hoisted_36, vue.toDisplayString(vue.unref(formatDate)(album.releaseDate)), 1)
+                        ])
+                      ], 8, _hoisted_30);
+                    }), 128))
+                  ]),
+                  discography.value.albums.length > 4 ? (vue.openBlock(), vue.createBlock(Button.default, {
+                    key: 0,
+                    submit: viewAllAlbums,
+                    class: "mn-t-small w-100 bg-white t-black",
+                    showSucces: false,
+                    showLoader: false
+                  }, {
+                    default: vue.withCtx(() => _cache[13] || (_cache[13] = [
+                      vue.createTextVNode(" View All Albums ")
+                    ])),
+                    _: 1
+                  })) : vue.createCommentVNode("", true)
+                ])) : vue.createCommentVNode("", true),
+                discography.value.singles.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_37, [
+                  _cache[17] || (_cache[17] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Singles & EPs", -1)),
+                  vue.createElementVNode("div", _hoisted_38, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(discography.value.singles, (single) => {
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        key: single._id,
+                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white",
+                        onClick: ($event) => navigateToTrack(single)
+                      }, [
+                        vue.createElementVNode("div", _hoisted_40, [
+                          single.coverUrl ? (vue.openBlock(), vue.createElementBlock("img", {
+                            key: 0,
+                            src: _ctx.FILE_SERVER_URL + single.coverUrl,
+                            alt: "Single cover",
+                            class: "w-100 h-100 object-fit-cover"
+                          }, null, 8, _hoisted_41)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_42, _cache[15] || (_cache[15] = [
+                            vue.createElementVNode("span", null, "S", -1)
+                          ])))
+                        ]),
+                        vue.createElementVNode("div", _hoisted_43, [
+                          vue.createElementVNode("p", _hoisted_44, vue.toDisplayString(single.title), 1),
+                          vue.createElementVNode("p", _hoisted_45, vue.toDisplayString(vue.unref(formatDate)(single.releaseDate)), 1)
+                        ])
+                      ], 8, _hoisted_39);
+                    }), 128))
+                  ]),
+                  discography.value.singles.length > 5 ? (vue.openBlock(), vue.createBlock(Button.default, {
+                    key: 0,
+                    submit: viewAllSingles,
+                    class: "mn-t-small w-100 bg-white t-black",
+                    showSucces: false,
+                    showLoader: false
+                  }, {
+                    default: vue.withCtx(() => _cache[16] || (_cache[16] = [
+                      vue.createTextVNode(" View All Singles & EPs ")
+                    ])),
+                    _: 1
+                  })) : vue.createCommentVNode("", true)
+                ])) : vue.createCommentVNode("", true),
+                discography.value.albums.length === 0 && discography.value.singles.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_46, [
+                  _cache[19] || (_cache[19] = vue.createElementVNode("p", { class: "p-medium mn-b-small" }, "No releases yet", -1)),
+                  _cache[20] || (_cache[20] = vue.createElementVNode("p", { class: "p-small t-transp" }, "This artist hasn't released any albums or singles yet.", -1)),
+                  isOwner.value ? (vue.openBlock(), vue.createBlock(Button.default, {
+                    key: 0,
+                    submit: addRelease,
+                    class: "mn-t-medium bg-main",
+                    showSucces: false,
+                    showLoader: false
+                  }, {
+                    default: vue.withCtx(() => _cache[18] || (_cache[18] = [
+                      vue.createTextVNode(" Add Release ")
+                    ])),
+                    _: 1
+                  })) : vue.createCommentVNode("", true)
+                ])) : vue.createCommentVNode("", true)
+              ])
+            ]),
+            relatedArtists.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_47, [
+              _cache[21] || (_cache[21] = vue.createElementVNode("h2", { class: "h3 mn-b-medium" }, "Fans Also Like", -1)),
+              vue.createElementVNode("div", _hoisted_48, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(relatedArtists.value, (relatedArtist) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: relatedArtist._id,
+                    class: "t-center cursor-pointer",
+                    onClick: ($event) => navigateToArtist(relatedArtist)
+                  }, [
+                    vue.createElementVNode("div", _hoisted_50, [
+                      relatedArtist.photoUrl ? (vue.openBlock(), vue.createElementBlock("img", {
+                        key: 0,
+                        src: _ctx.FILE_SERVER_URL + relatedArtist.photoUrl,
+                        alt: "Artist photo",
+                        class: "w-100 h-100 object-fit-cover"
+                      }, null, 8, _hoisted_51)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_52, [
+                        vue.createElementVNode("span", null, vue.toDisplayString(relatedArtist.name[0]), 1)
+                      ]))
+                    ]),
+                    vue.createElementVNode("p", _hoisted_53, vue.toDisplayString(relatedArtist.name), 1)
+                  ], 8, _hoisted_49);
+                }), 128))
+              ])
+            ])) : vue.createCommentVNode("", true)
+          ])
+        ]))
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=Artist.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Artist.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Artist.vue"],"sourcesContent":["<template>\n  <div>\n    <!-- Loading state -->\n    <div v-if=\"isLoading\" class=\"flex-center flex pd-extra\">\n      <Loader />\n    </div>\n    \n    <!-- Artist not found -->\n    <div v-else-if=\"!artist\" class=\"flex-center flex-column flex pd-extra\">\n      <h2 class=\"h2 mn-b-medium\">Artist Not Found</h2>\n      <p class=\"p-medium t-transp mn-b-medium\">The artist you are looking for doesn't exist or may have been removed.</p>\n      <Button\n        :submit=\"() => router.push({ name: 'music-home' })\"\n        class=\"bg-main \"\n        :showSucces=\"false\"\n        :showLoader=\"false\"\n      >\n        Back to Music\n      </Button>\n    </div>\n    \n    <!-- Artist content -->\n    <div v-else>\n      <!-- Cover image -->\n      <div \n        class=\"w-100 t-white h-50vh pos-relative\"\n        :style=\"artist.coverUrl ? `background-image: url(${FILE_SERVER_URL + artist.coverUrl}); background-size: cover; background-position: center;` : ''\"\n      >\n        <div class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small\" :class=\"artist.coverUrl ? 'bg-black-transp-50' : 'bg-black'\"></div>\n        \n        <!-- Artist actions for edit/manage -->\n        <div v-if=\"isOwner\" class=\"pos-absolute pos-t-medium pos-r-medium z-index-1\">\n          <Button\n            :submit=\"editArtist\"\n            class=\"bg-main  mn-r-small\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Edit Artist\n          </Button>\n          \n          <Button\n            :submit=\"manageContent\"\n            class=\"bg-white t-black\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Manage Content\n          </Button>\n        </div>\n        \n        <!-- Artist profile info -->\n        <div class=\"flex-v-center t-white  pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center\">\n          <div class=\"w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium\">\n            <img\n              v-if=\"artist.photoUrl\"\n              :src=\"FILE_SERVER_URL + artist.photoUrl\"\n              alt=\"Artist photo\"\n              class=\"w-100 h-100 object-fit-cover\"\n            />\n            <div v-else class=\"w-100 h-100 bg-white flex-center flex\">\n              <span class=\"h1\">{{ artist.name[0] }}</span>\n            </div>\n          </div>\n          \n          <div class=\" mobile:t-center\">\n            <div class=\"flex-v-center flex-nowrap flex mn-b-small mobile:flex-center\">\n              <h1 class=\"h1 mn-r-small\">{{ artist.name }}</h1>\n              <span v-if=\"artist.isVerified\" class=\"bg-main-nano pd-micro radius-small\">\n                ✓ Verified\n              </span>\n            </div>\n            \n            <p v-if=\"artist.location\" class=\"p-medium mn-b-small\">{{ artist.location }}</p>\n            \n            <!-- Social media links -->\n            <div class=\"flex flex-nowrap gap-small mobile:flex-center\">\n              <a \n                v-if=\"artist.socials.telegram\" \n                :href=\"`https://t.me/${artist.socials.telegram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>T</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.twitter\" \n                :href=\"`https://twitter.com/${artist.socials.twitter}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>𝕏</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.instagram\" \n                :href=\"`https://instagram.com/${artist.socials.instagram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>I</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.facebook\" \n                :href=\"`https://facebook.com/${artist.socials.facebook}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>F</span>\n              </a>\n              \n              <a \n                v-if=\"artist.website\" \n                :href=\"artist.website\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>W</span>\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Main content -->\n      <div class=\"pd-medium\">\n        <div class=\"cols-2-1_2 gap-medium mobile:cols-1\">\n          <!-- Left column - Bio and details -->\n          <div>\n            <div class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-small\">Biography</h2>\n              <p v-if=\"artist.bio\" class=\"p-medium\">{{ artist.bio }}</p>\n              <p v-else class=\"p-medium t-transp\">No biography available for this artist.</p>\n            </div>\n            \n            <!-- Genres -->\n            <div v-if=\"genres.length > 0\" class=\"bg-light pd-medium radius-medium\">\n              <h2 class=\"h3 mn-b-small\">Genres</h2>\n              <div class=\"flex flex-wrap gap-small\">\n                <span \n                  v-for=\"genre in genres\" \n                  :key=\"genre._id\"\n                  class=\"bg-white pd-thin radius-medium\"\n                >\n                  {{ genre.name }}\n                </span>\n              </div>\n            </div>\n          </div>\n          \n          <!-- Right column - Discography -->\n          <div>\n            <!-- Albums section -->\n            <div v-if=\"discography.albums.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-medium\">Albums</h2>\n              \n              <div class=\"cols-2 gap-small mobile:cols-1\">\n                <div\n                  v-for=\"album in discography.albums\"\n                  :key=\"album._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"navigateToAlbum(album)\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"album.coverUrl\"\n                      :src=\"FILE_SERVER_URL + album.coverUrl\"\n                      alt=\"Album cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>A</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ album.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(album.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.albums.length > 4\"\n                :submit=\"viewAllAlbums\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Albums\n              </Button>\n            </div>\n            \n            <!-- Singles section -->\n            <div v-if=\"discography.singles.length > 0\" class=\"bg-light pd-medium radius-medium\">\n              <h2 class=\"h3 mn-b-medium\">Singles & EPs</h2>\n              \n              <div class=\"cols-1 gap-small\">\n                <div\n                  v-for=\"single in discography.singles\"\n                  :key=\"single._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"navigateToTrack(single)\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"single.coverUrl\"\n                      :src=\"FILE_SERVER_URL + single.coverUrl\"\n                      alt=\"Single cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>S</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ single.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(single.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.singles.length > 5\"\n                :submit=\"viewAllSingles\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Singles & EPs\n              </Button>\n            </div>\n            \n            <!-- No discography yet -->\n            <div \n              v-if=\"discography.albums.length === 0 && discography.singles.length === 0\" \n              class=\"bg-light pd-medium radius-medium t-center\"\n            >\n              <p class=\"p-medium mn-b-small\">No releases yet</p>\n              <p class=\"p-small t-transp\">This artist hasn't released any albums or singles yet.</p>\n              \n              <Button\n                v-if=\"isOwner\"\n                :submit=\"addRelease\"\n                class=\"mn-t-medium bg-main \"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                Add Release\n              </Button>\n            </div>\n          </div>\n        </div>\n        \n        <!-- Related Artists -->\n        <div v-if=\"relatedArtists.length > 0\" class=\"mn-t-medium\">\n          <h2 class=\"h3 mn-b-medium\">Fans Also Like</h2>\n          \n          <div class=\"cols-5 gap-medium mobile:cols-2\">\n            <div\n              v-for=\"relatedArtist in relatedArtists\"\n              :key=\"relatedArtist._id\"\n              class=\"t-center cursor-pointer\"\n              @click=\"navigateToArtist(relatedArtist)\"\n            >\n              <div class=\"w-100 aspect-1x1 radius-medium o-hidden mn-b-small\">\n                <img\n                  v-if=\"relatedArtist.photoUrl\"\n                  :src=\"FILE_SERVER_URL + relatedArtist.photoUrl\"\n                  alt=\"Artist photo\"\n                  class=\"w-100 h-100 object-fit-cover\"\n                />\n                <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                  <span>{{ relatedArtist.name[0] }}</span>\n                </div>\n              </div>\n              \n              <p class=\"p-medium t-truncate\">{{ relatedArtist.name }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\n// import * as genreStore from '../../store/genres'; // Assuming you have a genre store\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\n// Import mixins\nimport { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\nconst { formatDate } = useGlobalMixins();\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// State\nconst isLoading = ref(true);\nconst genres = ref([]);\n\n// Computed\nconst artist = computed(() => {\n  return artistsStore.state.currentArtist;\n});\n\nconst discography = computed(() => {\n  return artistsStore.state.discography;\n});\n\nconst relatedArtists = computed(() => {\n  return artistsStore.state.relatedArtists;\n});\n\nconst isOwner = computed(() => {\n  if (!artist.value || !auth.state.user._id) return false;\n  \n  // Check if current user is the creator of the artist\n  return artist.value.creator?.target?._id === auth.state.user._id;\n});\n\n// Methods\nconst fetchArtist = async () => {\n  isLoading.value = true;\n  try {\n    // Get URL from route params\n    const url = route.params.url;\n    if (!url) {\n      throw new Error('Artist URL is required');\n    }\n    \n    await artistsStore.actions.fetchArtistByUrl(url);\n    \n    // Fetch genre details if we have genre IDs\n    if (artist.value?.genre && artist.value.genre.length > 0) {\n      await fetchGenres();\n    }\n  } catch (error) {\n    console.error('Error fetching artist:', error);\n    globals.actions.setError({\n      message: 'Failed to load artist'\n    });\n  } finally {\n    isLoading.value = false;\n  }\n};\n\nconst fetchGenres = async () => {\n  try {\n    // Assuming genreStore has a method to fetch multiple genres by IDs\n    // const fetchedGenres = await genreStore.actions.fetchGenresByIds(artist.value.genre);\n    // genres.value = fetchedGenres;\n  } catch (error) {\n    console.error('Error fetching genres:', error);\n  }\n};\n\nconst editArtist = () => {\n  router.push({\n    name: 'artist-edit',\n    params: { url: artist.value.url }\n  });\n};\n\nconst manageContent = () => {\n  // Navigate to a page for managing artist content (albums, tracks, etc.)\n  router.push({\n    name: 'artist-manage-content',\n    params: { artistId: artist.value._id }\n  });\n};\n\nconst navigateToAlbum = (album) => {\n  router.push({\n    name: 'album',\n    params: { url: album.url }\n  });\n};\n\nconst navigateToTrack = (track) => {\n  router.push({\n    name: 'track',\n    params: { url: track.url }\n  });\n};\n\nconst navigateToArtist = (artist) => {\n  router.push({\n    name: 'artist',\n    params: { url: artist.url }\n  });\n};\n\nconst viewAllAlbums = () => {\n  router.push({\n    name: 'artist-albums',\n    params: { artistId: artist.value._id }\n  });\n};\n\nconst viewAllSingles = () => {\n  router.push({\n    name: 'artist-singles',\n    params: { artistId: artist.value._id }\n  });\n};\n\nconst addRelease = () => {\n  router.push({\n    name: 'release-create',\n    query: { artistId: artist.value._id }\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  await fetchArtist();\n});\n</script>"],"names":["useGlobalMixins","useRouter","useRoute","ref","computed","artistsStore.state","auth.state","artistsStore.actions","globals.actions","artist","onMounted"],"mappings":"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"}