@ozdao/martyrs 0.2.491 → 0.2.493

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

@@ -2,20 +2,26 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Feed = require("../../../../components/Feed/Feed.vue.cjs");
-const TrackCard = require("../cards/TrackCard.vue.cjs");
-const AlbumCard = require("../cards/AlbumCard.vue.cjs");
-const Button = require("../../../../components/Button/Button.vue2.cjs");
-const Loader = require("../../../../components/Loader/Loader.vue.cjs");
+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.vue2.cjs");
+const Dropdown = require("../../../../components/Dropdown/Dropdown.vue.cjs");
+const Feed = require("../../../../components/Feed/Feed.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 IconShuffle = require("../../../icons/navigation/IconShuffle.vue.cjs");
+const IconCalendar = require("../../../icons/entities/IconCalendar.vue.cjs");
+const IconTime = require("../../../icons/entities/IconTime.vue.cjs");
+const IconShow = require("../../../icons/actions/IconShow.vue.cjs");
+const IconMusic = require("../../../icons/entities/IconMusic.vue.cjs");
+const IconCheckmark = require("../../../icons/navigation/IconCheckmark.vue.cjs");
+const TrackListCard = require("../cards/TrackListCard.vue.cjs");
+const AlbumCard = require("../cards/AlbumCard.vue.cjs");
 const albums = require("../../store/albums.cjs");
 const player = require("../../store/player.cjs");
-const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
-const _hoisted_1 = { class: "album-page" };
+const auth = require("../../../auth/views/store/auth.cjs");
+const _hoisted_1 = { class: "album-page pd-small" };
 const _hoisted_2 = {
   key: 0,
   class: "w-100 h-25r flex-center flex"
@@ -24,291 +30,517 @@ const _hoisted_3 = {
   key: 1,
   class: "t-center pd-big"
 };
-const _hoisted_4 = { key: 2 };
-const _hoisted_5 = { class: "album-header mn-b-medium flex flex-v-center gap-medium" };
-const _hoisted_6 = { class: "album-cover" };
-const _hoisted_7 = { class: "album-info" };
-const _hoisted_8 = { class: "" };
-const _hoisted_9 = { class: "album-meta mn-t-small flex flex-v-center" };
-const _hoisted_10 = {
+const _hoisted_4 = {
+  key: 2,
+  class: "album-content cols-2-fit-content mobile:cols-1 gap-big"
+};
+const _hoisted_5 = { class: "pos-sticky pos-t-0 mobile:pos-relative album-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: "album-details-section" };
+const _hoisted_13 = { class: "flex items-center gap-small mn-b-small" };
+const _hoisted_14 = { class: "badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase" };
+const _hoisted_15 = {
+  key: 0,
+  class: "badge bg-success-transp-20 t-success pd-thin-big radius-small t-small"
+};
+const _hoisted_16 = { class: "h1 mn-b-medium" };
+const _hoisted_17 = { class: "flex gap-small mn-b-medium" };
+const _hoisted_18 = { class: "dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin" };
+const _hoisted_19 = { class: "artists-section mn-b-big" };
+const _hoisted_20 = {
+  key: 0,
+  class: "t-medium mn-b-small"
+};
+const _hoisted_21 = { class: "flex flex-col gap-small" };
+const _hoisted_22 = { class: "artist-avatar" };
+const _hoisted_23 = {
   key: 1,
-  class: "t-medium"
+  class: "w-4r h-4r radius-full bg-primary flex-center"
 };
-const _hoisted_11 = { class: "t-grey" };
-const _hoisted_12 = { class: "t-grey" };
-const _hoisted_13 = { class: "album-actions mn-b-medium flex flex-v-center gap-small" };
-const _hoisted_14 = {
+const _hoisted_24 = { class: "flex items-center gap-thin" };
+const _hoisted_25 = { class: "t-large" };
+const _hoisted_26 = { class: "metadata-grid grid cols-2 gap-small mn-b-big" };
+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-primary-transp-20 w-3r h-3r radius-small flex-center" };
+const _hoisted_32 = { class: "t-medium" };
+const _hoisted_33 = {
   key: 0,
-  class: "pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin"
+  class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium"
 };
-const _hoisted_15 = { class: "mn-b-thin" };
-const _hoisted_16 = { class: "album-tracks" };
-const _hoisted_17 = {
+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 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_37 = { class: "icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center" };
+const _hoisted_38 = { class: "t-medium" };
+const _hoisted_39 = {
   key: 0,
-  class: "album-description mn-t-medium pd-medium bg-dark-transp-10 radius-medium"
+  class: "tags-section mn-b-medium"
 };
-const _hoisted_18 = { class: "t-grey" };
-const _hoisted_19 = {
+const _hoisted_40 = { class: "flex gap-thin flex-wrap" };
+const _hoisted_41 = {
   key: 1,
-  class: "more-from-artist mn-t-medium"
+  class: "description-section bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_20 = { class: "flex-between flex mn-b-small" };
-const _hoisted_21 = { class: "" };
-const _hoisted_22 = { class: "albums-grid cols-5 mobile:cols-2 gap-small" };
+const _hoisted_42 = { class: "t-transp" };
+const _hoisted_43 = {
+  key: 3,
+  class: "tracks-section mn-t-big"
+};
+const _hoisted_44 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_45 = {
+  key: 4,
+  class: "more-albums-section mn-t-big"
+};
+const _hoisted_46 = { class: "flex justify-between items-center mn-b-medium" };
+const _hoisted_47 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide" };
 const _sfc_main = {
   __name: "Album",
-  setup(__props) {
+  emits: ["page-loading", "page-loaded"],
+  setup(__props, { emit: __emit }) {
     const route = vueRouter.useRoute();
-    vueRouter.useRouter();
-    const isLoading = vue.ref(true);
+    const router = vueRouter.useRouter();
+    const emits = __emit;
+    const hasLoaded = vue.ref(false);
     const isFavorite = vue.ref(false);
     const showDropdown = vue.ref(false);
-    const moreFromArtist = vue.ref([]);
+    const followedArtists = vue.ref([]);
+    const moreAlbums = vue.ref([]);
+    albums.state.currentAlbum = null;
+    albums.state.currentAlbumTracks = [];
     const album = vue.computed(() => albums.state.currentAlbum);
-    const albumTracks = vue.computed(() => albums.state.currentAlbumTracks);
-    const getArtistName = (albumItem) => {
-      if (!albumItem) return "Unknown Artist";
-      if (albumItem.artist) {
-        if (typeof albumItem.artist === "object") {
-          return albumItem.artist.name || "Unknown Artist";
-        }
-        return albumItem.artist;
+    const albumTracks = vue.computed(() => albums.state.currentAlbumTracks || []);
+    const isOwner = vue.computed(() => {
+      return album.value?.owner?.target === auth.state.user?._id;
+    });
+    const totalDuration = vue.computed(() => {
+      if (!albumTracks.value.length) return "0:00";
+      const totalSeconds = albumTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);
+      return formatDuration(totalSeconds);
+    });
+    const formatDate = (dateString) => {
+      if (!dateString) return "Unknown";
+      return new Date(dateString).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      });
+    };
+    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 "Unknown Artist";
+      return `${m}:${s.toString().padStart(2, "0")}`;
     };
-    const formatReleaseYear = (dateString) => {
-      if (!dateString) return "";
-      return new Date(dateString).getFullYear();
+    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 playAlbum = () => {
       if (albumTracks.value && albumTracks.value.length > 0) {
         player.actions.setQueue(albumTracks.value);
       }
     };
+    const shufflePlay = () => {
+      if (albumTracks.value && albumTracks.value.length > 0) {
+        const shuffled = [...albumTracks.value].sort(() => Math.random() - 0.5);
+        player.actions.setQueue(shuffled);
+      }
+    };
     const toggleFavorite = () => {
       isFavorite.value = !isFavorite.value;
     };
+    const toggleFollowArtist = (artistId) => {
+      const index = followedArtists.value.indexOf(artistId);
+      if (index > -1) {
+        followedArtists.value.splice(index, 1);
+      } else {
+        followedArtists.value.push(artistId);
+      }
+    };
     const addToQueue = () => {
-      if (albumTracks.value && albumTracks.value.length > 0) {
+      if (albumTracks.value.length > 0) {
         albumTracks.value.forEach((track) => {
           player.actions.addToQueue(track);
         });
         showDropdown.value = false;
       }
     };
+    const editAlbum = () => {
+      router.push({ name: "album-edit", params: { url: album.value.url } });
+    };
+    const deleteAlbum = async () => {
+      if (confirm("Are you sure you want to delete this album?")) {
+        try {
+          await albums.actions.deleteAlbum(album.value._id);
+          router.push({ name: "music-library" });
+        } catch (error) {
+          console.error("Failed to delete album:", error);
+        }
+      }
+    };
     const copyLink = () => {
-      const url = window.location.href;
-      navigator.clipboard.writeText(url).then(() => {
-        showDropdown.value = false;
-      });
+      navigator.clipboard.writeText(window.location.href);
+      showDropdown.value = false;
     };
     const fetchAlbumData = async () => {
-      var _a, _b;
-      isLoading.value = true;
       try {
         await albums.actions.fetchAlbumByUrl(route.params.url);
-        if ((_b = (_a = album.value) == null ? void 0 : _a.artist) == null ? void 0 : _b._id) {
-          const artistAlbums = await albums.actions.fetchAlbums({
-            artist: album.value.artist._id,
+        if (album.value?.artists?.length) {
+          const artistIds = album.value.artists.map((a) => a._id);
+          const albums$1 = await albums.actions.fetchAlbums({
+            artist: { $in: artistIds },
             status: "published",
             isPublic: true,
-            limit: 5
+            limit: 6
           });
-          moreFromArtist.value = artistAlbums.filter((a) => a._id !== album.value._id);
+          moreAlbums.value = albums$1.filter((a) => a._id !== album.value._id).slice(0, 5);
         }
       } catch (error) {
         console.error("Error fetching album data:", error);
-      } finally {
-        isLoading.value = false;
       }
     };
-    vue.onMounted(fetchAlbumData);
-    vue.watch(() => route.params.url, (newUrl) => {
-      if (newUrl) {
-        fetchAlbumData();
-      }
+    vue.onMounted(async () => {
+      emits("page-loading");
+      await fetchAlbumData();
+      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)
-        ])) : !album.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _cache[1] || (_cache[1] = [
+        ])) : vue.createCommentVNode("", true),
+        hasLoaded.value && !album.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _cache[1] || (_cache[1] = [
           vue.createElementVNode("h2", { class: "" }, "Album not found", -1),
-          vue.createElementVNode("p", { class: "t-grey t-medium" }, "The album you're looking for doesn't exist or has been removed.", -1)
-        ]))) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.createElementVNode("p", { class: "t-transp t-medium" }, "The album you're looking for doesn't exist or has been removed.", -1)
+        ]))) : vue.createCommentVNode("", true),
+        album.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
           vue.createElementVNode("div", _hoisted_5, [
             vue.createElementVNode("div", _hoisted_6, [
               vue.createVNode(Media.default, {
-                url: album.value.coverUrl || "/assets/placeholder-album.jpg",
-                class: "w-15r h-15r object-fit-cover shadow-lg radius-small"
-              }, null, 8, ["url"])
+                url: album.value.coverArt || "/logo/logo-placeholder.jpg",
+                alt: album.value.title,
+                class: "aspect-1x1 w-100 radius-medium o-hidden"
+              }, null, 8, ["url", "alt"])
             ]),
             vue.createElementVNode("div", _hoisted_7, [
-              _cache[4] || (_cache[4] = vue.createElementVNode("div", { class: "t-small t-uppercase" }, "Album", -1)),
-              vue.createElementVNode("h1", _hoisted_8, vue.toDisplayString(album.value.title), 1),
-              vue.createElementVNode("div", _hoisted_9, [
-                album.value.artist && album.value.artist._id ? (vue.openBlock(), vue.createBlock(_component_router_link, {
-                  key: 0,
-                  to: { name: "artist", params: { url: album.value.artist.url } },
-                  class: "t-medium hover-t-main"
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode(vue.toDisplayString(getArtistName(album.value)), 1)
-                  ]),
-                  _: 1
-                }, 8, ["to"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_10, vue.toDisplayString(getArtistName(album.value)), 1)),
-                _cache[2] || (_cache[2] = vue.createElementVNode("span", { class: "t-grey mn-l-small mn-r-small" }, "•", -1)),
-                vue.createElementVNode("span", _hoisted_11, vue.toDisplayString(formatReleaseYear(album.value.releaseDate)), 1),
-                _cache[3] || (_cache[3] = vue.createElementVNode("span", { class: "t-grey mn-l-small mn-r-small" }, "•", -1)),
-                vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(albumTracks.value.length) + " " + vue.toDisplayString(albumTracks.value.length === 1 ? "song" : "songs"), 1)
+              vue.createElementVNode("div", _hoisted_8, [
+                vue.createElementVNode("div", _hoisted_9, vue.toDisplayString(album.value.totalTracks || 0), 1),
+                _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Tracks", -1))
+              ]),
+              vue.createElementVNode("div", _hoisted_10, [
+                vue.createElementVNode("div", _hoisted_11, vue.toDisplayString(formatNumber(album.value.views)), 1),
+                _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Views", -1))
               ])
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_13, [
-            vue.createVNode(Button.default, {
-              onClick: playAlbum,
-              class: "play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(IconPlay.default, {
-                  class: "i-small",
-                  fill: "rgb(var(--black))"
-                }),
-                _cache[5] || (_cache[5] = vue.createElementVNode("span", { class: "t-black t-medium" }, "Play", -1))
-              ]),
-              _: 1
-            }),
-            vue.createVNode(Button.default, {
-              onClick: toggleFavorite,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(IconLike.default, {
-                  class: "i-medium",
-                  fill: isFavorite.value ? "rgb(var(--main))" : "rgb(var(--white))"
-                }, null, 8, ["fill"])
-              ]),
-              _: 1
-            }),
-            vue.createVNode(Dropdown.default, { class: "pos-relative" }, {
-              content: vue.withCtx(() => [
-                showDropdown.value ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_14, [
-                  vue.createElementVNode("li", _hoisted_15, [
+          vue.createElementVNode("div", _hoisted_12, [
+            vue.createElementVNode("div", _hoisted_13, [
+              vue.createElementVNode("span", _hoisted_14, vue.toDisplayString(album.value.type), 1),
+              album.value.status === "published" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15, " Published ")) : vue.createCommentVNode("", true)
+            ]),
+            vue.createElementVNode("h1", _hoisted_16, vue.toDisplayString(album.value.title), 1),
+            vue.createElementVNode("div", _hoisted_17, [
+              vue.createVNode(Button.default, {
+                onClick: playAlbum,
+                color: "primary",
+                size: "medium",
+                class: "flex-1 flex-center gap-thin"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(IconPlay.default, { class: "w-1r h-1r" }),
+                  _cache[4] || (_cache[4] = vue.createTextVNode(" Play All "))
+                ]),
+                _: 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: shufflePlay,
+                color: "transp",
+                size: "medium",
+                class: "w-3r h-3r radius-full"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(IconShuffle.default, { class: "w-1-25r h-1-25r" })
+                ]),
+                _: 1
+              }),
+              vue.createVNode(Dropdown.default, {
+                modelValue: showDropdown.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($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_18, [
                     vue.createVNode(Button.default, {
                       onClick: addToQueue,
-                      class: "bg-transparent border-none pd-thin w-100 t-left hover-bg-dark radius-small",
-                      showLoader: false,
-                      showSucces: false
+                      color: "transp",
+                      size: "small",
+                      class: "w-100 justify-start"
                     }, {
-                      default: vue.withCtx(() => _cache[6] || (_cache[6] = [
-                        vue.createElementVNode("span", null, "Add to Queue", -1)
+                      default: vue.withCtx(() => _cache[5] || (_cache[5] = [
+                        vue.createTextVNode(" Add to Queue ")
                       ])),
                       _: 1
-                    })
-                  ]),
-                  vue.createElementVNode("li", null, [
+                    }),
                     vue.createVNode(Button.default, {
                       onClick: copyLink,
-                      class: "bg-transparent border-none pd-thin w-100 t-left hover-bg-dark radius-small",
-                      showLoader: false,
-                      showSucces: false
+                      color: "transp",
+                      size: "small",
+                      class: "w-100 justify-start"
                     }, {
-                      default: vue.withCtx(() => _cache[7] || (_cache[7] = [
-                        vue.createElementVNode("span", null, "Copy Link", -1)
+                      default: vue.withCtx(() => _cache[6] || (_cache[6] = [
+                        vue.createTextVNode(" Copy Link ")
                       ])),
                       _: 1
-                    })
+                    }),
+                    isOwner.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      _cache[9] || (_cache[9] = vue.createElementVNode("hr", { class: "mn-v-thin border-dark-transp-10" }, null, -1)),
+                      vue.createVNode(Button.default, {
+                        onClick: editAlbum,
+                        color: "transp",
+                        size: "small",
+                        class: "w-100 justify-start"
+                      }, {
+                        default: vue.withCtx(() => _cache[7] || (_cache[7] = [
+                          vue.createTextVNode(" Edit Album ")
+                        ])),
+                        _: 1
+                      }),
+                      vue.createVNode(Button.default, {
+                        onClick: deleteAlbum,
+                        color: "danger",
+                        size: "small",
+                        class: "w-100 justify-start"
+                      }, {
+                        default: vue.withCtx(() => _cache[8] || (_cache[8] = [
+                          vue.createTextVNode(" Delete Album ")
+                        ])),
+                        _: 1
+                      })
+                    ], 64)) : vue.createCommentVNode("", true)
                   ])
-                ])) : vue.createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ]),
+            vue.createElementVNode("div", _hoisted_19, [
+              album.value.artists && album.value.artists.length > 1 ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_20, "Artists")) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_21, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(album.value.artists, (artist) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: artist._id,
+                    class: "artist-card bg-light pd-medium radius-medium flex items-center gap-medium"
+                  }, [
+                    vue.createVNode(_component_router_link, {
+                      to: `/artist/${artist.url}`,
+                      class: "flex items-center gap-medium flex-1 hover-opacity"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("div", _hoisted_22, [
+                          artist.photoUrl ? (vue.openBlock(), vue.createBlock(Media.default, {
+                            key: 0,
+                            url: artist.photoUrl,
+                            alt: artist.name,
+                            class: "w-4r h-4r radius-full object-cover"
+                          }, null, 8, ["url", "alt"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_23, vue.toDisplayString(artist.name.charAt(0)), 1))
+                        ]),
+                        vue.createElementVNode("div", null, [
+                          vue.createElementVNode("div", _hoisted_24, [
+                            vue.createElementVNode("span", _hoisted_25, vue.toDisplayString(artist.name), 1),
+                            artist.isVerified ? (vue.openBlock(), vue.createBlock(IconCheckmark.default, {
+                              key: 0,
+                              class: "w-1r h-1r t-primary"
+                            })) : vue.createCommentVNode("", true)
+                          ]),
+                          _cache[10] || (_cache[10] = vue.createElementVNode("span", { class: "t-small t-transp" }, "Artist", -1))
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["to"]),
+                    !isOwner.value ? (vue.openBlock(), vue.createBlock(Button.default, {
+                      key: 0,
+                      onClick: () => toggleFollowArtist(artist._id),
+                      color: followedArtists.value.includes(artist._id) ? "primary" : "transp",
+                      size: "small"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(followedArtists.value.includes(artist._id) ? "Following" : "Follow"), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick", "color"])) : vue.createCommentVNode("", true)
+                  ]);
+                }), 128))
+              ])
+            ]),
+            vue.createElementVNode("div", _hoisted_26, [
+              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[11] || (_cache[11] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
+                  vue.createElementVNode("div", _hoisted_29, vue.toDisplayString(formatDate(album.value.releaseDate)), 1)
+                ])
               ]),
-              default: vue.withCtx(() => [
-                vue.createVNode(Button.default, {
-                  onClick: _cache[0] || (_cache[0] = ($event) => showDropdown.value = !showDropdown.value),
-                  class: "bg-transparent border-none pd-zero",
-                  showLoader: false,
-                  showSucces: false
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(IconEllipsis.default, {
-                      class: "i-medium",
-                      fill: "rgb(var(--white))"
-                    })
-                  ]),
-                  _: 1
-                })
+              vue.createElementVNode("div", _hoisted_30, [
+                vue.createElementVNode("div", _hoisted_31, [
+                  vue.createVNode(IconTime.default, { class: "w-1-5r h-1-5r t-primary" })
+                ]),
+                vue.createElementVNode("div", null, [
+                  _cache[12] || (_cache[12] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
+                  vue.createElementVNode("div", _hoisted_32, vue.toDisplayString(totalDuration.value), 1)
+                ])
               ]),
-              _: 1
-            })
-          ]),
-          vue.createElementVNode("div", _hoisted_16, [
-            vue.createVNode(Feed.default, {
-              store: {
-                read: () => _ctx.Promise.resolve(albumTracks.value),
-                state: { isLoading: false }
-              },
-              external: true,
-              items: albumTracks.value,
-              states: {
-                empty: {
-                  title: "No tracks in album",
-                  description: "This album appears to be empty",
-                  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, (track) => {
-                  return vue.openBlock(), vue.createBlock(TrackCard.default, {
+              album.value.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_33, [
+                vue.createElementVNode("div", _hoisted_34, [
+                  vue.createVNode(IconMusic.default, { class: "w-1-5r h-1-5r t-primary" })
+                ]),
+                vue.createElementVNode("div", null, [
+                  _cache[13] || (_cache[13] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Label", -1)),
+                  vue.createElementVNode("div", _hoisted_35, vue.toDisplayString(album.value.label), 1)
+                ])
+              ])) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_36, [
+                vue.createElementVNode("div", _hoisted_37, [
+                  vue.createVNode(IconShow.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" }, "Visibility", -1)),
+                  vue.createElementVNode("div", _hoisted_38, vue.toDisplayString(album.value.isPublic ? "Public" : "Private"), 1)
+                ])
+              ])
+            ]),
+            album.value.genres && album.value.genres.length || album.value.tags && album.value.tags.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_39, [
+              _cache[15] || (_cache[15] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
+              vue.createElementVNode("div", _hoisted_40, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(album.value.genres, (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(album.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),
+            album.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_41, [
+              _cache[16] || (_cache[16] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
+              vue.createElementVNode("p", _hoisted_42, vue.toDisplayString(album.value.description), 1)
+            ])) : vue.createCommentVNode("", true)
+          ])
+        ])) : vue.createCommentVNode("", true),
+        !_ctx.isLoading && album.value && albumTracks.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_43, [
+          _cache[17] || (_cache[17] = vue.createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
+          vue.createVNode(Feed.default, {
+            store: {
+              read: () => _ctx.Promise.resolve(albumTracks.value),
+              state: { isLoading: false }
+            },
+            external: true,
+            items: albumTracks.value,
+            states: {
+              empty: {
+                title: "No tracks in album",
+                description: "This album appears to be empty",
+                class: "pd-medium t-center"
+              }
+            }
+          }, {
+            default: vue.withCtx(({ items }) => [
+              vue.createElementVNode("div", _hoisted_44, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (track, index) => {
+                  return vue.openBlock(), vue.createBlock(TrackListCard.default, {
                     key: track._id,
                     track,
+                    index: index + 1,
                     showAlbum: false,
-                    showCover: false,
-                    class: "w-100 bg-dark-transp-10 radius-medium"
-                  }, null, 8, ["track"]);
+                    showCover: false
+                  }, null, 8, ["track", "index"]);
                 }), 128))
-              ]),
+              ])
+            ]),
+            _: 1
+          }, 8, ["store", "items"])
+        ])) : vue.createCommentVNode("", true),
+        !_ctx.isLoading && album.value && moreAlbums.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_45, [
+          vue.createElementVNode("div", _hoisted_46, [
+            _cache[19] || (_cache[19] = vue.createElementVNode("h2", { class: "h2" }, "More Albums", -1)),
+            album.value.artists && album.value.artists[0] ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+              key: 0,
+              to: `/artist/${album.value.artists[0].url}`,
+              class: "t-primary hover-opacity"
+            }, {
+              default: vue.withCtx(() => _cache[18] || (_cache[18] = [
+                vue.createTextVNode(" See all ")
+              ])),
               _: 1
-            }, 8, ["store", "items"])
+            }, 8, ["to"])) : vue.createCommentVNode("", true)
           ]),
-          album.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, [
-            _cache[8] || (_cache[8] = vue.createElementVNode("h3", { class: "mn-b-small" }, "About", -1)),
-            vue.createElementVNode("p", _hoisted_18, vue.toDisplayString(album.value.description), 1)
-          ])) : vue.createCommentVNode("", true),
-          moreFromArtist.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19, [
-            vue.createElementVNode("div", _hoisted_20, [
-              vue.createElementVNode("h2", _hoisted_21, "More by " + vue.toDisplayString(getArtistName(album.value)), 1),
-              album.value.artist && album.value.artist._id ? (vue.openBlock(), vue.createBlock(_component_router_link, {
-                key: 0,
-                to: { name: "artist", params: { url: album.value.artist.url } },
-                class: "t-main t-small hover-opacity"
-              }, {
-                default: vue.withCtx(() => _cache[9] || (_cache[9] = [
-                  vue.createTextVNode(" See all ")
-                ])),
-                _: 1
-              }, 8, ["to"])) : vue.createCommentVNode("", true)
-            ]),
-            vue.createElementVNode("div", _hoisted_22, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(moreFromArtist.value, (relatedAlbum) => {
-                return vue.openBlock(), vue.createElementBlock("div", {
-                  key: relatedAlbum._id
-                }, [
-                  vue.createVNode(AlbumCard.default, { album: relatedAlbum }, null, 8, ["album"])
-                ]);
-              }), 128))
-            ])
-          ])) : vue.createCommentVNode("", true)
-        ]))
+          vue.createElementVNode("div", _hoisted_47, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(moreAlbums.value, (relatedAlbum) => {
+              return vue.openBlock(), vue.createElementBlock("li", {
+                key: album.value._id,
+                class: "flex-none scroll-snap-align-start"
+              }, [
+                vue.createVNode(AlbumCard.default, {
+                  album: relatedAlbum,
+                  class: "w-min-15r transition-cubic-in-out"
+                }, null, 8, ["album"])
+              ]);
+            }), 128))
+          ])
+        ])) : vue.createCommentVNode("", true)
       ]);
     };
   }
 };
-const Album = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-ecbc3f9a"]]);
-exports.default = Album;
+exports.default = _sfc_main;
 //# sourceMappingURL=Album.vue.cjs.map