@ozdao/martyrs 0.2.565 → 0.2.566

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

@@ -1 +1 @@
-{"version":3,"file":"ArtistCardSmall.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCardSmall.vue"],"sourcesContent":["<!-- components/cards/ArtistCard.vue -->\n<template>\n  <div class=\"artist-card bg-light pd-medium radius-medium flex flex-center gap-big\">\n    <router-link \n      :to=\"artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to\"\n      class=\"flex flex-v-center gap-thin flex-1 hover-opacity\"\n    >\n      <div class=\"artist-avatar\">\n        <Media \n          v-if=\"artist.photoUrl\"\n          :url=\"artist.photoUrl\"\n          :alt=\"artist.name\"\n          class=\"w-4r h-4r radius-full object-fit-cover\"\n        />\n        <div v-else class=\"w-4r h-4r flex flex center radius-extra radius-full bg-main flex-center\">\n          {{ artist.name.charAt(0) }}\n        </div>\n      </div>\n\n      <div>\n        <div class=\"flex items-center gap-thin\">\n          <span class=\"mn-b-thin\">{{ artist.name }}</span>\n          <IconVerified v-if=\"artist.isVerified\" class=\"w-1r h-1r t-primary\" />\n        </div>\n        <span class=\"t-small t-transp\">{{ artistType }}</span>\n      </div>\n    </router-link>\n\n    <Button \n      v-if=\"showFollowButton\"\n      @click=\"handleFollowClick\"\n      :color=\"isFollowing ? 'primary' : 'transp'\"\n      size=\"small\"\n      class=\"bg-main\"\n    >\n      {{ isFollowing ? 'Following' : 'Follow' }}\n    </Button>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true,\n    validator: (value) => {\n      return value._id && value.name && value.url;\n    }\n  },\n  isFollowing: {\n    type: Boolean,\n    default: false\n  },\n  showFollowButton: {\n    type: Boolean,\n    default: true\n  },\n  artistType: {\n    type: String,\n    default: 'Artist'\n  }\n});\n\nconst emit = defineEmits(['toggle-follow']);\n\nconst handleFollowClick = () => {\n  emit('toggle-follow', props.artist._id);\n};\n</script>\n\n<style scoped>\n.artist-card {\n  transition: all 0.2s ease;\n}\n\n.artist-card:hover {\n  transform: translateY(-5px);\n}\n\n.artist-avatar img {\n  transition: transform 0.2s ease;\n}\n\n.artist-card:hover .artist-avatar img {\n  transform: scale(1.05);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,QAAQ;AAsBd,UAAM,OAAO;AAEb,UAAM,oBAAoB,MAAM;AAC9B,WAAK,iBAAiB,MAAM,OAAO,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ArtistCardSmall.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCardSmall.vue"],"sourcesContent":["<!-- components/cards/ArtistCard.vue -->\n<template>\n  <router-link\n   :to=\"artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to\"\n    class=\"artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-1 hover-opacity\"\n  >\n    <div\n     class=\"flex flex-nowrap flex-v-center gap-thin\"\n    >\n      <div class=\"artist-avatar\">\n        <Media \n          v-if=\"artist.photoUrl\"\n          :url=\"artist.photoUrl\"\n          :alt=\"artist.name\"\n          class=\"w-4r h-4r radius-full object-fit-cover\"\n        />\n        <div v-else class=\"w-4r h-4r flex flex center radius-extra radius-full bg-main flex-center\">\n          {{ artist.name.charAt(0) }}\n        </div>\n      </div>\n\n      <div>\n        <div class=\"flex items-center gap-thin\">\n          <span class=\"mn-b-thin\">{{ artist.name }}</span>\n          <IconVerified v-if=\"artist.isVerified\" class=\"w-1r h-1r t-primary\" />\n        </div>\n        <span class=\"t-small t-transp\">{{ artistType }}</span>\n      </div>\n    </div>\n\n    <Button \n      v-if=\"showFollowButton\"\n      @click=\"handleFollowClick\"\n      :color=\"isFollowing ? 'primary' : 'transp'\"\n      size=\"small\"\n      class=\"bg-main\"\n    >\n      {{ isFollowing ? 'Following' : 'Follow' }}\n    </Button>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true,\n    validator: (value) => {\n      return value._id && value.name && value.url;\n    }\n  },\n  isFollowing: {\n    type: Boolean,\n    default: false\n  },\n  showFollowButton: {\n    type: Boolean,\n    default: true\n  },\n  artistType: {\n    type: String,\n    default: 'Artist'\n  }\n});\n\nconst emit = defineEmits(['toggle-follow']);\n\nconst handleFollowClick = () => {\n  emit('toggle-follow', props.artist._id);\n};\n</script>\n\n<style scoped>\n.artist-card {\n  transition: all 0.2s ease;\n}\n\n.artist-card:hover {\n  transform: translateY(-5px);\n}\n\n.artist-avatar img {\n  transition: transform 0.2s ease;\n}\n\n.artist-card:hover .artist-avatar img {\n  transform: scale(1.05);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,UAAM,QAAQ;AAsBd,UAAM,OAAO;AAEb,UAAM,oBAAoB,MAAM;AAC9B,WAAK,iBAAiB,MAAM,OAAO,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/layouts/MusicBottomPlayer.vue.js

@@ -1,17 +1,42 @@
-import { computed, createBlock, createCommentVNode, openBlock } from "vue";
+import { computed, watch, createElementBlock, openBlock, createBlock, createCommentVNode, unref, withCtx, createVNode } from "vue";
+import { useRoute } from "vue-router";
 import MusicPlayer from "../player/MusicPlayer.vue.js";
-import { state } from "../../store/player.js";
+import FullscreenPlayer from "../player/FullscreenPlayer.vue.js";
+import _sfc_main$1 from "../../../../components/BottomSheet/BottomSheet.vue.js";
+import { state, actions } from "../../store/player.js";
+/* empty css                       */
 const _sfc_main = {
   __name: "MusicBottomPlayer",
   setup(__props) {
+    const route = useRoute();
     const currentTrack = computed(() => {
       return state.currentTrack;
     });
+    const showFullPlayer = computed(() => {
+      return state.showFullPlayer;
+    });
+    watch(() => route.path, () => {
+      if (state.showFullPlayer) {
+        actions.toggleFullPlayer();
+      }
+    });
     return (_ctx, _cache) => {
-      return currentTrack.value ? (openBlock(), createBlock(MusicPlayer, {
-        key: 0,
-        class: "pos-absolute pos-b-0 w-100"
-      })) : createCommentVNode("", true);
+      return openBlock(), createElementBlock("div", null, [
+        currentTrack.value && !showFullPlayer.value ? (openBlock(), createBlock(MusicPlayer, {
+          key: 0,
+          class: "pos-absolute pos-b-0 w-100"
+        })) : createCommentVNode("", true),
+        showFullPlayer.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 1,
+          show: showFullPlayer.value,
+          onToggle: _cache[0] || (_cache[0] = ($event) => unref(actions).toggleFullPlayer())
+        }, {
+          default: withCtx(() => [
+            createVNode(FullscreenPlayer)
+          ]),
+          _: 1
+        }, 8, ["show"])) : createCommentVNode("", true)
+      ]);
     };
   }
 };

package/dist/martyrs/src/modules/music/components/layouts/MusicBottomPlayer.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"MusicBottomPlayer.vue.js","sources":["../../../../../../../src/modules/music/components/layouts/MusicBottomPlayer.vue"],"sourcesContent":["<!-- components/layouts/MusicBottomPlayer.vue -->\n<template>\n  <MusicPlayer v-if=\"currentTrack\" class=\"pos-absolute pos-b-0 w-100\" />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport MusicPlayer from '../player/MusicPlayer.vue';\n\n// Import store modules\nimport { state as playerState } from '../../store/player.js';\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n</script>"],"names":["playerState"],"mappings":";;;;;;AAaA,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOA,MAAY;AAAA,IACrB,CAAC;;;;;;;;;"}
+{"version":3,"file":"MusicBottomPlayer.vue.js","sources":["../../../../../../../src/modules/music/components/layouts/MusicBottomPlayer.vue"],"sourcesContent":["<!-- components/layouts/MusicBottomPlayer.vue -->\n<template>\n  <div>\n    <MusicPlayer v-if=\"currentTrack && !showFullPlayer\" class=\"pos-absolute pos-b-0 w-100\" />\n\n    <BottomSheet\n      v-if=\"showFullPlayer\"\n      :show=\"showFullPlayer\"\n      @toggle=\"playerActions.toggleFullPlayer()\"\n    >\n      <FullscreenPlayer />\n    </BottomSheet>\n  </div>\n</template>\n\n<script setup>\nimport { computed, watch } from 'vue';\nimport { useRoute } from 'vue-router';\nimport MusicPlayer from '../player/MusicPlayer.vue';\nimport FullscreenPlayer from '../player/FullscreenPlayer.vue';\nimport BottomSheet from '@martyrs/src/components/BottomSheet/BottomSheet.vue';\n\n// Import store modules\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\nconst route = useRoute();\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n\n// Fullscreen player state\nconst showFullPlayer = computed(() => {\n  return playerState.showFullPlayer;\n});\n\n// Close fullscreen player on route change\nwatch(() => route.path, () => {\n  if (playerState.showFullPlayer) {\n    playerActions.toggleFullPlayer();\n  }\n});\n</script>\n\n<style>\n/* Shared control button styles for both players */\n.control-btn {\n  background: none;\n  border: none;\n  color: rgb(var(--grey));\n  cursor: pointer;\n  padding: 8px;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.control-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.control-btn.primary {\n  background: rgb(var(--second));\n  color: rgb(var(--white));\n  width: 32px;\n  height: 32px;\n}\n\n.play-icon {\n  width: 14px;\n  height: 14px;\n  fill: rgb(var(--white));\n}\n\n.control-btn.primary:hover {\n  background: rgb(var(--second));\n  transform: scale(1.06);\n}\n\n.control-btn.secondary:hover {\n  color: rgb(var(--white));\n  background: rgba(var(--black),0.1);\n}\n\n.control-btn.secondary:hover .control-icon {\n  fill: rgb(var(--white));\n}\n\n.control-btn.active {\n  color: rgb(var(--main));\n  background: rgba(var(--second),0.1);\n}\n\n.control-btn.active .control-icon {\n  fill: rgb(var(--main));\n}\n\n.control-btn.active:hover {\n  color: rgb(var(--main));\n  opacity: 0.8;\n  background: rgba(var(--second),0.2);\n}\n</style>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;AAyBA,UAAM,QAAQ,SAAQ;AAGtB,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOA,MAAY;AAAA,IACrB,CAAC;AAGD,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAOA,MAAY;AAAA,IACrB,CAAC;AAGD,UAAM,MAAM,MAAM,MAAM,MAAM;AAC5B,UAAIA,MAAY,gBAAgB;AAC9BC,gBAAc,iBAAgB;AAAA,MAChC;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,23 +1,23 @@
-import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, withCtx, createTextVNode, Fragment, renderList, createBlock } from "vue";
+import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, Fragment, renderList, createBlock, withCtx, createTextVNode } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 import Loader from "../../../../components/Loader/Loader.vue.js";
+/* empty css                                       */
 import Media from "../../../../components/Media/Media.vue.js";
-import _sfc_main$5 from "../../../../components/Dropdown/Dropdown.vue.js";
-import _sfc_main$a from "../../../../components/Feed/Feed.vue.js";
-import _sfc_main$2 from "../../../icons/navigation/IconPlay.vue.js";
-import _sfc_main$4 from "../../../icons/navigation/IconLike.vue.js";
-import _sfc_main$6 from "../../../icons/navigation/IconEllipsis.vue.js";
-import _sfc_main$3 from "../../../icons/navigation/IconShuffle.vue.js";
-import _sfc_main$7 from "../../../icons/entities/IconCalendar.vue.js";
+/* empty css                                            */
+import _sfc_main$8 from "../../../../components/Feed/Feed.vue.js";
+import _sfc_main$1 from "../../../icons/navigation/IconPlay.vue.js";
+import _sfc_main$3 from "../../../icons/navigation/IconLike.vue.js";
+import _sfc_main$2 from "../../../icons/navigation/IconShuffle.vue.js";
+import _sfc_main$5 from "../../../icons/entities/IconCalendar.vue.js";
 import IconTime from "../../../icons/entities/IconTime.vue.js";
-import _sfc_main$9 from "../../../icons/actions/IconShow.vue.js";
-import _sfc_main$8 from "../../../icons/entities/IconMusic.vue.js";
-import _sfc_main$b from "../cards/TrackListCard.vue.js";
+import _sfc_main$7 from "../../../icons/actions/IconShow.vue.js";
+import _sfc_main$6 from "../../../icons/entities/IconMusic.vue.js";
+import _sfc_main$4 from "../blocks/ActionButtons.vue.js";
+import _sfc_main$9 from "../cards/TrackListCard.vue.js";
 import AlbumCard from "../cards/AlbumCard.vue.js";
 import ArtistCardSmall from "../cards/ArtistCardSmall.vue.js";
-import { state, actions } from "../../store/albums.js";
-import { actions as actions$1 } from "../../store/player.js";
+import { state, actions as actions$1 } from "../../store/albums.js";
+import { actions } from "../../store/player.js";
 import { state as state$1 } from "../../../auth/views/store/auth.js";
 const _hoisted_1 = { class: "album-page pd-small" };
 const _hoisted_2 = {
@@ -30,7 +30,7 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = {
   key: 2,
-  class: "album-content cols-2-fit-content mobile:cols-1 gap-big"
+  class: "album-content cols-2 mobile:cols-1 gap-big"
 };
 const _hoisted_5 = { class: "pos-sticky pos-t-0 mobile:pos-relative album-cover-section" };
 const _hoisted_6 = { class: "stats-grid grid cols-2 gap-small" };
@@ -46,42 +46,40 @@ const _hoisted_14 = {
   class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase"
 };
 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-white pd-small radius-medium shadow-big mn-t-thin" };
-const _hoisted_18 = { class: "artists-section mn-b-medium" };
-const _hoisted_19 = {
+const _hoisted_16 = { class: "artists-section mn-b-medium" };
+const _hoisted_17 = {
   key: 0,
   class: "t-medium mn-b-small"
 };
-const _hoisted_20 = { class: "flex flex-column gap-small" };
-const _hoisted_21 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_18 = { class: "flex flex-column gap-small" };
+const _hoisted_19 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_20 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
+const _hoisted_21 = { class: "t-medium" };
 const _hoisted_22 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_23 = { class: "t-medium" };
-const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_25 = { class: "t-medium" };
-const _hoisted_26 = {
+const _hoisted_24 = {
   key: 0,
   class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular"
 };
+const _hoisted_25 = { class: "t-medium" };
+const _hoisted_26 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_27 = { class: "t-medium" };
-const _hoisted_28 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_29 = { class: "t-medium" };
-const _hoisted_30 = {
+const _hoisted_28 = {
   key: 0,
   class: "tags-section mn-b-medium"
 };
-const _hoisted_31 = { class: "flex gap-thin flex-wrap" };
-const _hoisted_32 = {
+const _hoisted_29 = { class: "flex gap-thin flex-wrap" };
+const _hoisted_30 = {
   key: 3,
   class: "tracks-section mn-t-big"
 };
-const _hoisted_33 = { class: "bg-light radius-medium o-hidden" };
-const _hoisted_34 = {
+const _hoisted_31 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_32 = {
   key: 4,
   class: "more-albums-section mn-t-big"
 };
-const _hoisted_35 = { class: "flex justify-between items-center mn-b-medium" };
-const _hoisted_36 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide" };
+const _hoisted_33 = { class: "flex justify-between items-center mn-b-medium" };
+const _hoisted_34 = { 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",
   emits: ["page-loading", "page-loaded"],
@@ -91,7 +89,6 @@ const _sfc_main = {
     const emits = __emit;
     const hasLoaded = ref(false);
     const isFavorite = ref(false);
-    const showDropdown = ref(false);
     const followedArtists = ref([]);
     const moreAlbums = ref([]);
     state.currentAlbum = null;
@@ -106,6 +103,48 @@ const _sfc_main = {
       const totalSeconds = albumTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);
       return formatDuration(totalSeconds);
     });
+    const actionButtons = computed(() => {
+      const buttons = [
+        {
+          type: "button",
+          class: "t-white bg-black",
+          icon: _sfc_main$1,
+          iconFill: "rgb(var(--white))",
+          text: "Play All",
+          action: playAlbum
+        },
+        {
+          type: "button",
+          class: "bg-light",
+          icon: _sfc_main$2,
+          text: "Shuffle",
+          action: shufflePlay
+        },
+        {
+          type: "button",
+          class: "bg-light",
+          icon: _sfc_main$3,
+          iconFill: isFavorite.value ? "rgb(var(--main))" : "rgb(var(--black))",
+          text: isFavorite.value ? "Liked" : "Like",
+          action: toggleFavorite
+        },
+        {
+          type: "dropdown",
+          items: [
+            { text: "Add to Queue", action: addToQueue },
+            { text: "Copy Link", action: copyLink },
+            { text: "Add to Playlist", action: addToPlaylist }
+          ]
+        }
+      ];
+      if (isOwner.value) {
+        const items = buttons[3].items;
+        items.push({ separator: true });
+        items.push({ text: "Edit Album", action: editAlbum });
+        items.push({ text: "Delete Album", action: deleteAlbum, color: "danger" });
+      }
+      return buttons;
+    });
     const formatDate = (dateString) => {
       if (!dateString) return "Unknown";
       return new Date(dateString).toLocaleDateString("en-US", {
@@ -135,13 +174,13 @@ const _sfc_main = {
     };
     const playAlbum = () => {
       if (albumTracks.value && albumTracks.value.length > 0) {
-        actions$1.setQueue(albumTracks.value);
+        actions.setQueue(albumTracks.value);
       }
     };
     const shufflePlay = () => {
       if (albumTracks.value && albumTracks.value.length > 0) {
         const shuffled = [...albumTracks.value].sort(() => Math.random() - 0.5);
-        actions$1.setQueue(shuffled);
+        actions.setQueue(shuffled);
       }
     };
     const toggleFavorite = () => {
@@ -158,18 +197,20 @@ const _sfc_main = {
     const addToQueue = () => {
       if (albumTracks.value.length > 0) {
         albumTracks.value.forEach((track) => {
-          actions$1.addToQueue(track);
+          actions.addToQueue(track);
         });
-        showDropdown.value = false;
       }
     };
+    const addToPlaylist = () => {
+      console.log("Add album to playlist");
+    };
     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 actions.deleteAlbum(album.value._id);
+          await actions$1.deleteAlbum(album.value._id);
           router.push({ name: "music-library" });
         } catch (error) {
           console.error("Failed to delete album:", error);
@@ -178,14 +219,13 @@ const _sfc_main = {
     };
     const copyLink = () => {
       navigator.clipboard.writeText(window.location.href);
-      showDropdown.value = false;
     };
     const fetchAlbumData = async () => {
       try {
-        await actions.fetchAlbumByUrl(route.params.url);
+        await actions$1.fetchAlbumByUrl(route.params.url);
         if (album.value?.artists?.length) {
           const artistIds = album.value.artists.map((a) => a._id);
-          const albums = await actions.fetchAlbums({
+          const albums = await actions$1.fetchAlbums({
             artist: { $in: artistIds },
             status: "published",
             isPublic: true,
@@ -209,7 +249,7 @@ const _sfc_main = {
         _ctx.isLoading ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createVNode(Loader)
         ])) : createCommentVNode("", true),
-        hasLoaded.value && !album.value ? (openBlock(), createElementBlock("div", _hoisted_3, _cache[1] || (_cache[1] = [
+        hasLoaded.value && !album.value ? (openBlock(), createElementBlock("div", _hoisted_3, _cache[0] || (_cache[0] = [
           createElementVNode("h2", { class: "" }, "Album not found", -1),
           createElementVNode("p", { class: "t-transp t-medium" }, "The album you're looking for doesn't exist or has been removed.", -1)
         ]))) : createCommentVNode("", true),
@@ -218,16 +258,16 @@ const _sfc_main = {
             createVNode(Media, {
               url: album.value.coverArt || "/logo/logo-placeholder.jpg",
               alt: album.value.title,
-              class: "aspect-1x1 w-100 w-max-30r mn-b-small radius-medium o-hidden"
+              class: "aspect-1x1 w-100 mn-b-small radius-medium o-hidden"
             }, null, 8, ["url", "alt"]),
             createElementVNode("div", _hoisted_6, [
               createElementVNode("div", _hoisted_7, [
                 createElementVNode("div", _hoisted_8, toDisplayString(album.value.totalTracks || 0), 1),
-                _cache[2] || (_cache[2] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Tracks", -1))
+                _cache[1] || (_cache[1] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Tracks", -1))
               ]),
               createElementVNode("div", _hoisted_9, [
                 createElementVNode("div", _hoisted_10, toDisplayString(formatNumber(album.value.views)), 1),
-                _cache[3] || (_cache[3] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Views", -1))
+                _cache[2] || (_cache[2] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Views", -1))
               ])
             ])
           ]),
@@ -237,135 +277,10 @@ const _sfc_main = {
               album.value.status === "published" ? (openBlock(), createElementBlock("span", _hoisted_14, " Published ")) : createCommentVNode("", true)
             ]),
             createElementVNode("h1", _hoisted_15, toDisplayString(album.value.title), 1),
+            createVNode(_sfc_main$4, { buttons: actionButtons.value }, null, 8, ["buttons"]),
             createElementVNode("div", _hoisted_16, [
-              createVNode(_sfc_main$1, {
-                onClick: playAlbum,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 t-white bg-black radius-thin flex-center gap-thin"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$2, {
-                    fill: "rgb(var(--white))",
-                    class: "i-medium"
-                  }),
-                  _cache[4] || (_cache[4] = createTextVNode(" Play All "))
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$1, {
-                onClick: shufflePlay,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 bg-light radius-thin flex-center gap-thin"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$3, { class: "i-medium" }),
-                  _cache[5] || (_cache[5] = createTextVNode(" Shuffle "))
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$1, {
-                onClick: toggleFavorite,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 bg-light radius-thin flex-center gap-thin"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$4, {
-                    class: "i-medium",
-                    fill: isFavorite.value ? "rgb(var(--main)" : "rgb(var(--black)"
-                  }, null, 8, ["fill"]),
-                  createTextVNode(" " + toDisplayString(isFavorite.value ? "Liked" : "Like"), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$5, {
-                label: { component: _sfc_main$6, class: "bg-light radius-thin pd-thin i-big" },
-                modelValue: showDropdown.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showDropdown.value = $event),
-                class: "relative"
-              }, {
-                trigger: withCtx(() => [
-                  createVNode(_sfc_main$1, {
-                    color: "transp",
-                    size: "medium",
-                    class: "w-3r h-3r radius-full"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(_sfc_main$6, { class: "w-1-25r h-1-25r" })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                default: withCtx(() => [
-                  createElementVNode("div", _hoisted_17, [
-                    createVNode(_sfc_main$1, {
-                      onClick: addToQueue,
-                      color: "transp",
-                      size: "small",
-                      class: "w-100 justify-start"
-                    }, {
-                      default: withCtx(() => _cache[6] || (_cache[6] = [
-                        createTextVNode(" Add to Queue ")
-                      ])),
-                      _: 1
-                    }),
-                    createVNode(_sfc_main$1, {
-                      onClick: copyLink,
-                      color: "transp",
-                      size: "small",
-                      class: "w-100 justify-start"
-                    }, {
-                      default: withCtx(() => _cache[7] || (_cache[7] = [
-                        createTextVNode(" Copy Link ")
-                      ])),
-                      _: 1
-                    }),
-                    createVNode(_sfc_main$1, {
-                      onClick: _ctx.addToPlaylist,
-                      color: "transp",
-                      size: "small",
-                      class: "w-100 justify-start"
-                    }, {
-                      default: withCtx(() => _cache[8] || (_cache[8] = [
-                        createTextVNode(" Add to Playlist ")
-                      ])),
-                      _: 1
-                    }, 8, ["onClick"]),
-                    isOwner.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      _cache[11] || (_cache[11] = createElementVNode("hr", { class: "mn-v-thin border-dark-transp-10" }, null, -1)),
-                      createVNode(_sfc_main$1, {
-                        onClick: editAlbum,
-                        color: "transp",
-                        size: "small",
-                        class: "w-100 justify-start"
-                      }, {
-                        default: withCtx(() => _cache[9] || (_cache[9] = [
-                          createTextVNode(" Edit Album ")
-                        ])),
-                        _: 1
-                      }),
-                      createVNode(_sfc_main$1, {
-                        onClick: deleteAlbum,
-                        color: "danger",
-                        size: "small",
-                        class: "w-100 justify-start"
-                      }, {
-                        default: withCtx(() => _cache[10] || (_cache[10] = [
-                          createTextVNode(" Delete Album ")
-                        ])),
-                        _: 1
-                      })
-                    ], 64)) : createCommentVNode("", true)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["label", "modelValue"])
-            ]),
-            createElementVNode("div", _hoisted_18, [
-              album.value.artists ? (openBlock(), createElementBlock("h3", _hoisted_19, "Artists")) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_20, [
+              album.value.artists ? (openBlock(), createElementBlock("h3", _hoisted_17, "Artists")) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_18, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(album.value.artists, (artist) => {
                   return openBlock(), createBlock(ArtistCardSmall, {
                     key: artist._id,
@@ -377,40 +292,40 @@ const _sfc_main = {
                 }), 128))
               ])
             ]),
-            _cache[17] || (_cache[17] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
-            createElementVNode("div", _hoisted_21, [
-              createElementVNode("div", _hoisted_22, [
-                createVNode(_sfc_main$7, { class: "i-medium t-primary" }),
+            _cache[8] || (_cache[8] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
+            createElementVNode("div", _hoisted_19, [
+              createElementVNode("div", _hoisted_20, [
+                createVNode(_sfc_main$5, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[12] || (_cache[12] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
-                  createElementVNode("div", _hoisted_23, toDisplayString(formatDate(album.value.releaseDate)), 1)
+                  _cache[3] || (_cache[3] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
+                  createElementVNode("div", _hoisted_21, toDisplayString(formatDate(album.value.releaseDate)), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_24, [
+              createElementVNode("div", _hoisted_22, [
                 createVNode(IconTime, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[13] || (_cache[13] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
-                  createElementVNode("div", _hoisted_25, toDisplayString(totalDuration.value), 1)
+                  _cache[4] || (_cache[4] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
+                  createElementVNode("div", _hoisted_23, toDisplayString(totalDuration.value), 1)
                 ])
               ]),
-              album.value.label ? (openBlock(), createElementBlock("div", _hoisted_26, [
-                createVNode(_sfc_main$8, { class: "i-medium t-primary" }),
+              album.value.label ? (openBlock(), createElementBlock("div", _hoisted_24, [
+                createVNode(_sfc_main$6, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[14] || (_cache[14] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Label", -1)),
-                  createElementVNode("div", _hoisted_27, toDisplayString(album.value.label), 1)
+                  _cache[5] || (_cache[5] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Label", -1)),
+                  createElementVNode("div", _hoisted_25, toDisplayString(album.value.label), 1)
                 ])
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_28, [
-                createVNode(_sfc_main$9, { class: "i-medium t-primary" }),
+              createElementVNode("div", _hoisted_26, [
+                createVNode(_sfc_main$7, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[15] || (_cache[15] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
-                  createElementVNode("div", _hoisted_29, toDisplayString(album.value.isPublic ? "Public" : "Private"), 1)
+                  _cache[6] || (_cache[6] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
+                  createElementVNode("div", _hoisted_27, toDisplayString(album.value.isPublic ? "Public" : "Private"), 1)
                 ])
               ])
             ]),
-            album.value.genres && album.value.genres.length || album.value.tags && album.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_30, [
-              _cache[16] || (_cache[16] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
-              createElementVNode("div", _hoisted_31, [
+            album.value.genres && album.value.genres.length || album.value.tags && album.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_28, [
+              _cache[7] || (_cache[7] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
+              createElementVNode("div", _hoisted_29, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(album.value.genres, (genre) => {
                   return openBlock(), createElementBlock("span", {
                     key: genre,
@@ -427,9 +342,9 @@ const _sfc_main = {
             ])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        !_ctx.isLoading && album.value && albumTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_32, [
-          _cache[18] || (_cache[18] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
-          createVNode(_sfc_main$a, {
+        !_ctx.isLoading && album.value && albumTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_30, [
+          _cache[9] || (_cache[9] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
+          createVNode(_sfc_main$8, {
             store: {
               read: () => _ctx.Promise.resolve(albumTracks.value),
               state: { isLoading: false }
@@ -445,9 +360,9 @@ const _sfc_main = {
             }
           }, {
             default: withCtx(({ items }) => [
-              createElementVNode("div", _hoisted_33, [
+              createElementVNode("div", _hoisted_31, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track, index) => {
-                  return openBlock(), createBlock(_sfc_main$b, {
+                  return openBlock(), createBlock(_sfc_main$9, {
                     key: track._id,
                     track,
                     index: index + 1,
@@ -460,21 +375,21 @@ const _sfc_main = {
             _: 1
           }, 8, ["store", "items"])
         ])) : createCommentVNode("", true),
-        !_ctx.isLoading && album.value && moreAlbums.value.length ? (openBlock(), createElementBlock("section", _hoisted_34, [
-          createElementVNode("div", _hoisted_35, [
-            _cache[20] || (_cache[20] = createElementVNode("h2", { class: "h2" }, "More Albums", -1)),
+        !_ctx.isLoading && album.value && moreAlbums.value.length ? (openBlock(), createElementBlock("section", _hoisted_32, [
+          createElementVNode("div", _hoisted_33, [
+            _cache[11] || (_cache[11] = createElementVNode("h2", { class: "h2" }, "More Albums", -1)),
             album.value.artists && album.value.artists[0] ? (openBlock(), createBlock(_component_router_link, {
               key: 0,
               to: { name: "artist", params: { url: album.value.artists[0].url } },
               class: "t-primary hover-opacity"
             }, {
-              default: withCtx(() => _cache[19] || (_cache[19] = [
+              default: withCtx(() => _cache[10] || (_cache[10] = [
                 createTextVNode(" See all ")
               ])),
               _: 1
             }, 8, ["to"])) : createCommentVNode("", true)
           ]),
-          createElementVNode("div", _hoisted_36, [
+          createElementVNode("div", _hoisted_34, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(moreAlbums.value, (relatedAlbum) => {
               return openBlock(), createElementBlock("li", {
                 key: album.value._id,
@@ -482,7 +397,7 @@ const _sfc_main = {
               }, [
                 createVNode(AlbumCard, {
                   album: relatedAlbum,
-                  class: "w-min-15r transition-cubic-in-out"
+                  class: "w-15r transition-cubic-in-out"
                 }, null, 8, ["album"])
               ]);
             }), 128))